vxe-table点击分页依旧保存复选框选项以及复选框按条件禁用事件
在使用vxe-table时,如果需要在点击分页后保留复选框的选项以及实现按条件禁用复选框的功能,可以通过以下方法实现:
- 使用
checkbox-config
配置复选框功能。 - 使用
radio-config
配置单选按钮功能。 - 使用
checkbox-change
事件处理复选框选项变化。 - 使用
cell-click
事件处理单元格点击事件,包括复选框。 - 通过条件判断来确定是否禁用复选框。
以下是一个简单的示例代码:
<vxe-table
border
:data="tableData"
:checkbox-config="{trigger: 'cell', checkMethod: checkMethod}"
@checkbox-change="handleCheckboxChange">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<!-- 其他列配置 -->
</vxe-table>
<vxe-pager
:loading="loading"
:page-size="pageSize"
:total="total"
@page-change="handlePageChange"></vxe-pager>
export default {
data() {
return {
tableData: [],
loading: false,
pageSize: 10,
currentPage: 1,
total: 0,
selected: [] // 存储选中的行数据
};
},
methods: {
checkMethod({ row }) {
// 根据条件判断是否禁用复选框
return row.status !== 'disabled'; // 假设status为'disabled'的时候禁用复选框
},
handleCheckboxChange({ selection }) {
this.selected = selection; // 更新选中项数据
},
handlePageChange({ currentPage, pageSize }) {
this.currentPage = currentPage;
this.pageSize = pageSize;
this.loading = true;
// 模拟异步加载数据
setTimeout(() => {
this.tableData = this.loadData();
this.loading = false;
}, 100);
},
loadData() {
// 模拟分页加载数据
const list = [];
for (let i = 0; i < this.pageSize; i++) {
const num = (this.currentPage - 1) * this.pageSize + i;
list.push({
id: num,
name: `Name_${num}`,
status: num % 3 === 0 ? 'disabled' : 'enabled' // 模拟状态
});
}
return list;
}
},
mounted() {
this.handlePageChange({ currentPage: 1, pageSize: this.pageSize });
}
};
在这个示例中,checkMethod
方法用于定义复选框是否被禁用,handleCheckboxChange
方法用于处理复选框选项变化,handlePageChange
方法用于处理分页变化,在分页时更新数据。selected
数组用于存储选中的行数据,在分页切换后,这些数据会保留。
评论已关闭