vxe |
您所在的位置：网站首页 › 表格的全选按钮怎么设置颜色 › vxe |
vxe
|
vxe-table树形结构通过checkStrictly:true 设置父子节点不互相关联，默认不显示头部复选框 如果需要显示头部复选框需要设置showHeader:true 设置checkStrictly为true的时候全选功能是没法使用的，需要我们手动写一个表头的复选框 treeCheckBox默认设置为false，表示复选框未被选中状态 treeCheckBox默认设置为null，表示有子项选中 treeCheckBox默认设置为true，表示全部选中 重写全选框，全选框的状态也需要自动实现，重写全选框后@checkbox-all无法使用，使用@checkbox-change实现全选框的显示状态 selectChangeEvent({records}) { if (records.length >= this.tableData.length) { this.treeCheckBox = true } else if (records.length > 0) { this.treeCheckBox = null } else { this.treeCheckBox = false } } },checkStrictly:true的情况下，setAllCheckboxRow无法使用，只能使用setCheckboxRow方法，全选涉及到子行无法选中，又进行了遍历实现子行选中 // 设置手动全选 treeCheckBoxChange({ checked }) { if (checked) { this.$refs.xTable.setCheckboxRow(this.tableData, true); this.setAllCheckboxRow(this.tableData, true); } else { this.$refs.xTable.clearCheckboxRow() } this.selectRecords = this.tableData; }, // 处理子结构的全选 setAllCheckboxRow(nodes, checked) { nodes.forEach(node => { node.checked = checked; if (node.children && node.children.length > 0) { this.$refs.xTable.setCheckboxRow(node.children, true) } }); },整体相关逻辑如下： ..... export default { name: 'Untitled-1', props: {}, components: {}, data() { return { tableData: [{ id:1, name:1, children:[{ id:1, name:1 }] }] } }, computed: {}, watch: {}, created() {}, mounted() {}, methods: { // 设置手动全选 treeCheckBoxChange({ checked }) { if (checked) { this.$refs.xTable.setCheckboxRow(this.tableData, true); this.setAllCheckboxRow(this.tableData, true); } else { this.$refs.xTable.clearCheckboxRow() } this.selectRecords = this.tableData; }, // 处理子结构的全选 setAllCheckboxRow(nodes, checked) { nodes.forEach(node => { node.checked = checked; if (node.children && node.children.length > 0) { this.$refs.xTable.setCheckboxRow(node.children, true) } }); }, // 设置全选框的状态 selectChangeEvent({records}) { if (records.length >= this.tableData.length) { this.treeCheckBox = true } else if (records.length > 0) { this.treeCheckBox = null } else { this.treeCheckBox = false } } }, }, } |
【本文地址】
今日新闻 |
推荐新闻 |