antdesign vue中table表格选中项的清除对勾问题

antd table表格选中对勾,操作之后清除掉复选框对勾

template

  <a-table
      ref="table"
      size="middle"
      :rowKey="
        (record) => {
          return record.id;
        }
      "
      :columns="columns"
      :dataSource="tableData"
      :loading="loading"
      :rowSelection="rowSelection"
    >
    </a-table>

javascript

const columns = [
{
    title: "序号",
    customRender: (text, record, index) => `${index + 1}`,
    scopedSlots: { customRender: "sn" },
    width: 80,
    fixed: "left",
  },
  {
  	title: "名称",
	dataIndex: "name",
				
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    width: 210,
  },
]
export default {
	data() {
	    return {
	    	columns,
	    	loading:false,
	    	tableData:[],
	    	selectedRowKeys:[]
		}
	}
 	computed: {
	    rowSelection() {
	      const { selectedRowKeys } = this;
	      const _this = this;
	      return {
	        selectedRowKeys,  // 一定要加上这一行代码,清除才会有作用
	        onChange: (selectedRowKeys) => {
	          _this.selectedRowKeys = selectedRowKeys;
	        },
	      };
	   },
  	},
  	methods:{
  		clearData () {
			this.selectedRowKeys = [] // 操作完之后再调用这个方法就有效果了
		}
	}
}


最近更新

  1. TCP协议是安全的吗?

    2024-05-10 07:22:09       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-10 07:22:09       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-10 07:22:09       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-10 07:22:09       20 阅读

热门阅读

  1. 啰嗦一下开发语言

    2024-05-10 07:22:09       10 阅读
  2. 伪类和伪元素的区别是什么?

    2024-05-10 07:22:09       9 阅读
  3. uniapp vue 获取天气数据

    2024-05-10 07:22:09       10 阅读
  4. 学习Uni-app开发小程序Day6

    2024-05-10 07:22:09       10 阅读
  5. 构建跨平台应用的利器——UniApp

    2024-05-10 07:22:09       11 阅读
  6. 基于STM32的云端灌溉系统毕业设计

    2024-05-10 07:22:09       9 阅读
  7. 第十一章数据仓库和商务智能

    2024-05-10 07:22:09       10 阅读
  8. Delphi 高效处理大数据量的字典数据的查询问题

    2024-05-10 07:22:09       10 阅读