踩坑记录:在使用Elemen UI的table组件展示数据时,使用了【type="expand"】由于需要对表格行内数据的数据进行修改,在展开行内放置了一个switch组件,但是在第一次修改switch状态时,展开行就会自动收起,后续修改不会收起。
背景
ini 代码解读复制代码
v-loading="loading"
element-loading-text="拼命加载中"
:data="errLogs"
border
>
type ="expand">
slot-scope="props">
{{ props.row.showJson }}
v-model="props.row.showJson"
active-text="JSON"
/>
label ="id" prop="id" width="100" />
展开行,直接修改switch状态,正常情况下会开启switch;然而现在的情况是 switch 会改变成开启状态,但是展开行自动合并起来了!
问题
switch 状态修改完成,展开行自动收起
原因
table在数据发生改变时会引起表格的重新渲染!
解决问题
这里需要使用table
组件的两个属性:row-key
、expand-row-keys
,一个事件expand-change
思路:通过添加row-key当作唯一值,使用expand-row-keys数组来控制expand的展开收起
实现
ini 代码解读复制代码
v-loading="loading"
element-loading-text="拼命加载中"
:data="errLogs"
border
:row-key="(row) => {return row.id}" // 设置唯一row-key
:expand-row-keys="expandedRowKeys" // 展示行
@expand-change="expandOpen" // 展开收起事件
>
type ="expand">
slot-scope="props">
{{ props.row.showJson }}
v-model="props.row.showJson"
active-text="JSON"
/>
label ="id" prop="id" width="100" />
export default {
data() {
expandedRowKeys: [] //当前展开行的row-key
},
methods: {
获取展开行row-key
expandOpen(row, expand) {
this.expandedRowKeys = expand.map(v => v.id)
},
}
}
评论记录:
回复评论: