ant a-table 树表格级联选择

<template><div><div class="table-box"><a-button type="primary" @click="btnclick">点击获取数据</a-button><a-table :columns="columns" :data-source="data" :row-selection="rowSelection" /></div></div>
</template><script>
export default {data() {return {columns: [{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',width: '12%',},{title: '地址',dataIndex: 'address',width: '30%',key: 'address',},],data: [{key: 1,name: '张三',age: 60,address: '北京朝阳',children: [{key: 11,name: '王五',age: 42,address: '北京石景山',},{key: 12,name: '李四',age: 30,address: '河北邯郸',children: [{key: 121,name: '李飒',age: 16,address: '河北石家庄',},],},{key: 13,name: '马六',age: 72,address: '山东济南',children: [{key: 131,name: '马林',age: 42,address: '山东济宁',children: [{key: 1311,name: '马里兰',age: 25,address: '山东滨州',},{key: 1312,name: '马安山',age: 18,address: '山东青岛',},],},],},],},{key: 2,name: '冯七',age: 32,address: '东北大庆',},{key: 3,name: '冯七3',age: 32,address: '东北大庆',},{key: 4,name: '冯七4',age: 32,address: '东北大庆',},{key: 5,name: '冯七5',age: 32,address: '东北大庆',},{key: 6,name: '冯七6',age: 32,address: '东北大庆',},{key: 7,name: '冯七7',age: 32,address: '东北大庆',},{key: 8,name: '冯七8',age: 32,address: '东北大庆',},{key: 9,name: '冯七9',age: 32,address: '东北大庆',},{key: 10,name: '冯七10',age: 32,address: '东北大庆',},{key: 101,name: '冯七101',age: 32,address: '东北大庆',},{key: 102,name: '冯七102',age: 32,address: '东北大庆',},],selectedRowKeys: [2],}},created() {},computed: {rowSelection() {const { selectedRowKeys } = thisreturn {selectedRowKeys,onChange: this.onSelectChange,hideDefaultSelections: true,onSelect: this.onSelect,onSelectAll: this.onSelectAll,}},},methods: {// 按钮点击事件btnclick() {this.selectedRowKeys = [...new Set(this.selectedRowKeys)]console.log('最后拿到的数据：', this.selectedRowKeys)},// 选中项发生变化时的回调onSelectChange(selectedRowKeys) {// this.selectedRowKeys=[]this.selectedRowKeys = selectedRowKeys},// 用户手动选择/取消选择某列的回调onSelect(record, selected) {// this.selectedRowKeys=[]//每个复选框点击都会触发const selectrows = [record.key]if (record.hasOwnProperty('children')) {const generator = (record) => {record.forEach((item) => {selectrows.push(item.key)if (item.children && item.children.length > 0) {generator(item.children)}})}generator(record.children)}const newselect = this.selectedRowKeys.filter((item) => !selectrows.includes(item))selected? (this.selectedRowKeys = [...this.selectedRowKeys, ...selectrows]): (this.selectedRowKeys = newselect)// console.log('剩余的数据：', [...new Set(this.selectedRowKeys)])},// 勾选全部onSelectAll(selected, selectedRows, changeRows) {this.selectedRowKeys = []selectedRows.forEach((item) => {this.selectedRowKeys.push(item.key)})// console.log('全部：', [...new Set(this.selectedRowKeys)])// console.log('全部：', selected, selectedRows, changeRows)},// 默认勾选getCheckboxProps: (record) => ({//重点部分props: {defaultChecked: this.selectedRowKeys.indexOf(record.key) > -1 ? true : false, //defaultCheckedId里面是默认选中的id，判断是否含有这些id，有的那就选中，没有的就不选中key: record.key + '', //使得id的数据类型为string},}),},
}
</script><style lang="less" scoped>
.table-box {background-color: #fff;
}
</style>

ant a-table 树表格级联选择相关推荐

【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
ant中table表格的多选框如何清空
项目需求:表格前加一列多选框,可以做多选和提交,还可以在提交后.重置或者翻页后对多选框清空使用的组件是ant中下的可操作选择的table:这样我们就知道复选框选中的那些数据id,其实就是select ...
ant vue table表格隐藏列
ant vue table表格隐藏列随手记一下
前端学习（1963）vue之电商管理系统电商系统之控制级联选择框的选择范围
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
Ant Design table实现表头列宽拖拉官方 vue-draggable-resizable的魔改版
Ant Design table实现表头拖拽官方 vue-draggable-resizable的魔改版这里顺便也说一下使用官方vue-draggable-resizable组件,可能也有人不喜欢 ...
点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作
点击按钮创建一个表格 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
【EasyUI篇】TreeGrid树表格组件
微信公众号:程序yuan 关注可获得更多干货哦!.问题或建议,请公众号留言; ------------------------------------------------ 关注小编微信公众号获取更 ...
Ant Design Table修改滚动条样式
Ant Design Table修改滚动条样式目录一.目的二.步骤 1.了解滚动条的组成部分 2.样式修改 3.实现效果二.总结目录一.目的修改Ant表格的固定列滚动而产生的滚动条样式, ...

ant a-table 树表格级联选择

ant a-table 树表格级联选择相关推荐

最新文章

热门文章