vue3使用 vxe-table 点击事件中 对表格内的通过一个field绑定的值进行修改 要区分开 点击后面的值对前面对应的值修改
时间: 2024-03-12 22:44:05 浏览: 22
可以在 vxe-table 的点击事件中获取到当前行数据对象,然后根据这个对象中的数据进行相应的修改。具体实现可以参考以下代码:
```html
<template>
<vxe-table ref="table" :data="tableData" @cell-click="handleCellClick">
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="age" title="年龄"></vxe-table-column>
<vxe-table-column field="status" title="状态"></vxe-table-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 20, status: '正常' },
{ id: 2, name: '李四', age: 25, status: '异常' },
{ id: 3, name: '王五', age: 30, status: '正常' }
]
}
},
methods: {
handleCellClick({ row, column, cell }) {
if (column.property === 'status') {
const { id, status } = row
if (status === '正常') {
row.status = '异常'
} else {
row.status = '正常'
}
this.$refs.table.updateStatus(id, row)
}
}
}
}
</script>
```
在上述代码中,我们通过 `@cell-click` 事件监听表格的点击事件,然后在事件处理函数 `handleCellClick` 中判断当前点击的列是否为 `status` 列,如果是则根据当前行的 `status` 值进行修改,最后使用 `$refs.table.updateStatus` 方法更新表格数据。注意,这里的 `updateStatus` 方法需要传入当前行的 `id` 和修改后的数据对象 `row`。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)