ant a-table 表格数据同步

描述： 勾选右侧表格数据同步到左侧表格，删除左侧表格数据同步去掉右侧勾选

<template><div><div class="table-box"><div class="table-left-box"><a-button type="primary" @click="btngetnewclick">重新获取数据</a-button><a-button class="btn-getdata" type="danger" @click="btnclick">点击获取数据</a-button><a-table :columns="columns" :data-source="data" :row-selection="rowSelection" /></div><div class="table-right-box"><a-table :columns="columnstwo" :data-source="datatwo"><span slot="action" slot-scope="text, record"><span><a v-has="'detail:view'" @click="handleDetail(record)">删 除</a></span></span></a-table></div></div></div>
</template><script>
export default {data() {return {columns: [{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '地址',dataIndex: 'address',key: 'address',},],data: [],dataone: [{key: 1,name: '张三',age: 60,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: '东北大庆',},],dataonetwo: [{key: 11,name: '李四',age: 60,address: '北京海淀',},{key: 12,name: '申六',age: 32,address: '东北吉林',},{key: 13,name: '罗老师3',age: 32,address: '东北哈尔滨',},{key: 14,name: '贾巴4',age: 32,address: '东北大庆',},{key: 15,name: '陈九5',age: 32,address: '东北大庆',},{key: 16,name: '马二6',age: 32,address: '东北大庆',},{key: 17,name: '永远的神7',age: 32,address: '东北大庆',},],columnstwo: [{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '地址',dataIndex: 'address',key: 'address',},],actionObj: {title: '操作',dataIndex: 'action',scopedSlots: { customRender: 'action' },},datatwo: [],datatwodata: [],selectedRowKeys: [],selectedRowsData: [],selectedRowKeysTwo: [],datatype: 1,}},created() {},computed: {rowSelection() {const { selectedRowKeys } = thisreturn {selectedRowKeys,onChange: this.onSelectChange,hideDefaultSelections: true,onSelect: this.onSelect,onSelectAll: this.onSelectAll,}},},mounted() {this.getdata()},methods: {btngetnewclick() {if (this.datatype == 2) {this.data = this.dataonetwothis.datatype = 1} else {this.data = this.dataonethis.datatype = 2}this.datatwo = this.datatwodata},// 按钮点击事件btnclick() {this.selectedRowKeys = [...new Set(this.selectedRowKeys)]console.log('最后拿到的数据：', this.selectedRowKeys)},getdata() {this.data = this.dataonethis.datatype = 2this.columnstwo = []this.columnstwo = [{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '地址',dataIndex: 'address',key: 'address',},]this.columnstwo.push(this.actionObj)},// 选中项发生变化时的回调onSelectChange(selectedRowKeys, selectedRows) {// this.selectedRowKeys=[]this.selectedRowKeys = selectedRowKeysthis.selectedRowsData = selectedRowsthis.datatwodata = [...new Set([...this.datatwo, ...selectedRows])]this.datatwo = this.datatwodataconsole.log('获取所有的数据：', this.selectedRowsData)},// 默认勾选getCheckboxProps: (record) => ({//重点部分props: {defaultChecked: this.selectedRowKeys.indexOf(record.key) > -1 ? true : false, //defaultCheckedId里面是默认选中的id，判断是否含有这些id，有的那就选中，没有的就不选中key: record.key + '', //使得id的数据类型为string},}),handleDetail(val) {console.log('数据形式：', val.key)this.datatwo.forEach((item, index) => {if (item.key == val.key) {// console.log('  datatwo:', this.datatwo)// console.log(' selectedRowKeys:', this.selectedRowKeys)this.datatwo.splice(index, 1)// this.selectedRowKeys.splice(index, 1)}})this.selectedRowKeys.forEach((item, index) => {if (item == val.key) {this.selectedRowKeys.splice(index, 1)}})},},
}
</script><style lang="less" scoped>
.table-box {display: flex;
}
.btn-getdata {margin-left: 20px;
}
.table-left-box {background-color: #fff;width: 45%;margin-right: 9%;
}
.table-right-box {background-color: #fff;width: 45%;
}
</style>

ant a-table 表格数据同步相关推荐

asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
代码: 1 /// <summary> 2 /// HTML Table表格数据(html)导出EXCEL 3 /// </summary> 4 /// <param n ...
Vue + Element-ui 实现table表格数据相同项合并
Vue + Element-ui 实现table表格数据相同项合并通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
使用Pandas的read_html方法读取网页Table表格数据
本文通过一个小实例,说明使用Pandas的read_html方法读取网页Table表格数据要读取的网页表格数据 http://vip.stock.finance.sina.com.cn/q/go.p ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
ant vue table表格隐藏列
ant vue table表格隐藏列随手记一下
excel服务器数据同步修改,excel表格数据同步修改-关于excel不同表格（不同工作簿）之间数据同步修改......
EXCEL表格文档如何数据同步更新 excel中让两份表格实现数据同步的具体步骤如下: 首先打开计算机,在计算机桌面找到excel软件,鼠标左键双击excel的快捷方式以打开软件.然后打开需要进行数据 ...
jQuery读取Table表格数据
1.表格 2.获取表格数据 let rows = $("#myTable tr") let report = [] for (let i=1, len = rows.length; ...
ant中table表格的多选框如何清空
项目需求:表格前加一列多选框,可以做多选和提交,还可以在提交后.重置或者翻页后对多选框清空使用的组件是ant中下的可操作选择的table:这样我们就知道复选框选中的那些数据id,其实就是select ...

ant a-table 表格数据同步

ant a-table 表格数据同步相关推荐

最新文章

热门文章