ant-desin-vue——table全选时自定义的禁用行也被选上,且最后一行不选中问题

摘要:
错误效果(1号是数据采集后禁用的项):正确效果:原因:没有键{{text}}co分配给数据

错误效果(序号1是获取数据后,初始化禁用的项):                                                        正确效果:

ant-desin-vue——table全选时自定义的禁用行也被选上,且最后一行不选中问题第1张                                                                                                     ant-desin-vue——table全选时自定义的禁用行也被选上,且最后一行不选中问题第2张

原因:未给数据指定key

<template>
  <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];
const data = [
  {
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys:[],//选中的key,清空选中时赋值空数组即可
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // 禁用项
            name: record.name,
          },
        }),
      };
    },
  },
  mounted(){
    let that = this;
for (let i in that.dataTable) { that.dataTable[i].key = parseInt(i) + 1; // <== 关键——全选时不选择禁用数据 } } }; </script>

免责声明:文章转载自《ant-desin-vue——table全选时自定义的禁用行也被选上,且最后一行不选中问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇解决ubuntu每次重启屏幕亮度都重置为最高亮度问题apk下载安装,存储的位置,路径下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Lua常用时间函数

常用时间函数 print(os.time()) --当前系统时间值 1456368102 print(os.date("%Y%m%d",os.time())) --当前系统时间的格式化字符串 20160225 print(os.date("*t"), os.time()) --当前系统时间表 table完整版本: {year=2005, month=...

flink-SQL

Table API和SQL捆绑在flink-table Maven工件中。必须将以下依赖项添加到你的项目才能使用Table API和SQL: <dependency> <groupId>org.apache.flink</groupId> <artifactId>flink-table_2.11<...

SQL Server数据库级别触发器

  禁止修改表结构和加表 CREATE TRIGGER [Object_Change_Trigger_DDL] ON DATABASE FOR ALTER_TABLE,DROP_TABLE,CREATE_TABLE,CREATE_INDEX,ALTER_INDEX, DROP_INDEX AS DECLARE @EventData AS XML;...

NPOI 2.0导出word(docx格式)

大名鼎鼎的NPOI用来导出EXCEL的文章园子里面有很多,可是用来导出WORD文档的文章大都含糊不清,最近刚好完成一个导出WORD文档的需求,在此分享下。 NPOI里面认为word文档的最基本的结构是段落,代表这个段落的类就是XWPFParagraph,使用这个类可以设置段落里面的字体、大小、以及是否加粗等。 代表整个文档的的类XWPFDocument,是...

td中内容自动换行

使用<table> 进行页面开发,会遇到字符串很长将table撑开变形的问题,在网上搜了一些,终于找到 一个比较好用的解决方法。贴出来,方便以后使用。在table标签中加入如下的style就行了。<table border="0" cellspacing="0" cellpadding="0" style="table-layout:fi...

pg分区表一

PostgreSQL的分区表创建较Oracle分区表复杂些,需要借助创建继承表和触发器的模式实现, 具体创建方法可以参照以下实验, 供参考。 创建父表 123456789101112131415161718 CREATE TABLE fenqu_table ( id integer NOT NULL, mcc character varying(5)...