element-plus [Bug Report] el-table在改变columns出现顺序后,未发生变化

kx1ctssn  于 2022-10-21  发布在  其他
关注(0)|答案(3)|浏览(318)

Element Plus version

1.2.0-beta.5

OS/Browsers version

chrome 96.0.4664.110

Vue version

3.2.26

https://codepen.io/fashion01cc/pen/vYeJbRv

Steps to reproduce

  1. 表头部分通过v-for=“item in columns”生成并设置了key值
  2. 改变columns中的数据的顺序
  3. 表头顺序未发生改变

What is Expected?

表头顺序按照columns中顺序重新生成

What is actually happening?

保持原来的顺序

yhuiod9q

yhuiod9q1#

我也碰到过类似的问题,你可以这样写来避免这种问题:
changeSort() {
this.columns = [];
setTimeout(() => {
this.columns = [{
label: 'B',
prop: 'b'
},
{
label: 'A',
prop: 'a'
},
{
label: 'C',
prop: 'c'
},
]
});
}

dxpyg8gm

dxpyg8gm2#

我也碰到过类似的问题,你可以这样写来避免这种问题: changeSort() { this.columns = []; setTimeout(() => { this.columns = [{ label: 'B', prop: 'b' }, { label: 'A', prop: 'a' }, { label: 'C', prop: 'c' }, ] }); }

不设置key可以正常应用,但感觉这是个bug

xdnvmnnf

xdnvmnnf3#

<script setup>
import { ref,nextTick } from 'vue'
import { setupElementPlus } from './element-plus.js';

setupElementPlus();
const column = ref([
  { label: 'A', prop: 'a' },
  { label: 'B', prop: 'b' },
  { label: 'C', prop: 'c' },
])
const data = ref([
  { a: 1, b: 2, c: 3 }
])
function change(){
  column.value = []
  nextTick(()=>{
    column.value = [{ label: 'B', prop: 'b' },
    { label: 'A', prop: 'a' },
    { label: 'C', prop: 'c' }]
  })
}
</script>

<template>
  <el-table :data="data">
  	<el-table-column v-for="(item,index) in column" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
  </el-table>
  <el-button type="primary"  @click="change">change</el-button>
</template>

可以试试这个方式,感觉应该是Vue的问题

相关问题