vue2+antdesign,页面中通过vxe-table渲染数据,表格中有一行使用template可以点击传入当前行数据,点击弹出一个弹窗,弹窗内是一个a-table的表格,表格的表头columns在data中定义,现在通过点击的行的id来判断,如果是点击行id为1,则弹窗内表头columns需要过滤掉一条,点击id不为1,弹窗内表头则不过滤。但是现在点击后都为过滤后的表头,为什么?详细代码是什么
时间: 2023-12-01 17:03:12 浏览: 37
根据你提供的描述,可能是因为在弹窗上下文中修改了表头的数据源。你可以尝试将表头数据源复制一份,然后在弹窗中使用副本进行修改,以避免影响到原始数据源。
以下是可能的解决方案:
```
<template>
<div>
<vxe-table :data="tableData">
<template #table-column-name="{row}">
<a @click="showPopup(row.id)">点击弹窗</a>
</template>
</vxe-table>
<a-modal :visible="popupVisible" @cancel="closePopup">
<a-table :columns="popupColumns" :data-source="popupTableData"></a-table>
</a-modal>
</div>
</template>
<script>
import { ref } from 'vue';
import XEUtils from 'xe-utils';
import { Modal } from 'ant-design-vue';
export default {
setup() {
const popupVisible = ref(false);
const popupColumns = ref([]);
const popupTableData = ref([]);
const tableData = ref([
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
]);
const showPopup = (id) => {
popupVisible.value = true;
if (id === 1) {
// 如果点击的是 id 为1 的行,则过滤掉一列
const filteredColumns = XEUtils.filterTree(data.columns, (column) => column.key !== 'age');
popupColumns.value = filteredColumns;
} else {
// 否则使用原始的列
popupColumns.value = [...data.columns];
}
popupTableData.value = fetchTableData();
};
const closePopup = () => {
popupVisible.value = false;
};
const fetchTableData = () => {
// 根据需要的表格数据进行处理
return [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
];
};
return {
tableData,
popupVisible,
popupColumns,
popupTableData,
showPopup,
closePopup,
};
},
};
</script>
```
在上面的示例中,我们使用了 `XEUtils` 库中的 `filterTree` 方法来过滤表头列。我们还为弹窗中的表格数据源定义了一个 `fetchTableData` 函数,可以根据需要的数据格式进行处理。
希望这可以帮助你解决问题。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)