700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Ant Design Vue table表格点击行选中多选框

Ant Design Vue table表格点击行选中多选框

时间:2020-08-20 04:58:49

相关推荐

Ant Design Vue table表格点击行选中多选框

参考官方文档,实现点击行选中前边的多选框

<template><div><a-table :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,getCheckboxProps:getCheckboxProps}":columns="columns":dataSource="data":customRow="setRow"></a-table></div></template><script>const columns = [{title: "Name",dataIndex: "name",scopedSlots: {customRender: "name" }},{title: "Age",dataIndex: "age"},{title: "Address",dataIndex: "address"}];const data = [{key: "1",name: "John Brown",age: 32,address: "New York No. 1 Lake Park"},{key: "2",name: "Jim Green",age: 42,address: "London No. 1 Lake Park"},{key: "3",name: "Joe Black",age: 32,address: "Sidney No. 1 Lake Park"},{key: "4",name: "Disabled User",age: 99,address: "Sidney No. 1 Lake Park"}];export default {data () {return {data,columns,selectedRowKeys: [],selectedRows: []};},computed: {// checkBox属性设置getCheckboxProps (record) {return record => ({props: {defaultChecked: record.name === this.data[0].name}})}},methods: {setRow (record) {return {on: {click: () => {let rowKeys = this.selectedRowKeys;if (rowKeys.length > 0 && rowKeys.includes(record.key)) {rowKeys.splice(rowKeys.indexOf(record.key), 1);} else {rowKeys.push(record.key);}this.selectedRowKeys = rowKeys;console.log(this.selectedRowKeys)}}};},onSelectChange (selectedRowKeys) {console.log("selectedRowKeys changed: ", selectedRowKeys);this.selectedRowKeys = selectedRowKeys;},},mounted () {}};</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。