vue3+elementPlus ,直接cv能用。
<el-table
class="require-table"
:data="state.tableData"
style="width: 100%"
:row-key="tableKey" //此方法返回表格行的key
// 此数组存储上面方法获取的key,数组内包含哪行的key那么此行就是展开状态
:expand-row-keys="state.expandRowKeys"
@expand-change="clickOpen" //行展开的回调函数
></el-table>
const state = reative{(
expandRowKeys:[]
)}
const tableKey = row => {
return row.mid
}
const clickOpen = row => {
// row.mid 是需要添加或删除的元素
if (state.expandRowKeys.indexOf(row.mid) !== -1) {
// 如果 row.mid 在数组中存在,则删除它
state.expandRowKeys.splice(state.expandRowKeys.indexOf(row.mid), 1)
} else {
// 如果 row.mid 在数组中不存在,则添加它
state.expandRowKeys.push(row.mid)
}
//去重
state.expandRowKeys = [...new Set(state.expandRowKeys)]
}