vue2+antdesign,使用vxe-table获取数据渲染列表,点击当前行传入row,点击打卡弹窗是一个a-table,通过当前行row里的id,如果是1就把在data中定义的a-table的表头过滤掉一个,但是当点击的不为1的时候,弹窗内表头也会过滤掉,为什么,详细代码是什么
时间: 2023-12-01 20:02:42 浏览: 76
用于在vxetable表格中适配antdesignvue组件的渲染
根据您的描述,可能是因为在点击打卡弹窗时,您是通过判断当前行row里的id是否为1来决定是否过滤表头的。但是在点击其他行时,由于您没有重置a-table的表头,所以会出现表头被过滤的情况。
解决方法是在点击其他行时,手动将a-table的表头重置为初始状态。在vue中,您可以通过v-if或v-show来动态控制a-table是否渲染,从而实现表头的重置。
以下是可能的代码示例:
```
<template>
<div>
<vxe-table :data="tableData" @row-click="handleRowClick"></vxe-table>
<a-table v-if="showATable" :columns="aTableColumns" :data="aTableData"></a-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
aTableData: [],
aTableColumns: [
{ title: '姓名', key: 'name' },
{ title: '部门', key: 'department' },
{ title: '打卡时间', key: 'time' },
],
showATable: false, // 默认不显示a-table
};
},
methods: {
handleRowClick(row) {
if (row.id === 1) {
// 如果当前行id为1,过滤掉a-table的第一列
this.aTableColumns = this.aTableColumns.slice(1);
} else {
// 如果当前行id不为1,重置a-table的表头
this.aTableColumns = [
{ title: '姓名', key: 'name' },
{ title: '部门', key: 'department' },
{ title: '打卡时间', key: 'time' },
];
}
// 更新a-table的数据并显示
this.aTableData = [/* 根据当前行row的id获取对应数据并更新到aTableData中 */];
this.showATable = true;
},
},
};
</script>
```
需要注意的是,上述代码只是一种可能的实现方式,具体实现方式要根据您的业务逻辑来定。另外,由于您没有提供完整的代码和数据结构,以上示例仅供参考,可能需要根据实际情况进行调整。
阅读全文