vue标签

Table 中，默认复选框选中，以及禁用操作

            <!-- 表格信息 -->
            <a-table
                :columns="columns"
                :data-source="data"
                :row-selection="{
                    selectedRowKeys: selectedRowKeys,
                    onChange: onSelectChange,
                    getCheckboxProps: getCheckboxProps,
                }"
            >
            </a-table>

• rowSelection：行选择属性，设置行相关操作
• selectedRowKeys：一个数组集合，[]，用于存放选中的key
• onChange：点击行时触发的事件
• getCheckboxProps：设置复选框相关操作的属性

    methods: {
        onSelectChange(selectedRowKeys, selectedRows) { // 选中事件，selectedRows：选中行数据
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows;
        },
        getCheckboxProps(record) {  // 该方法便利每一行，设置每行的属性
            return {
                props: {
                    disabled: true,  // 设置禁用
                    name: record.appName,  // 设置name属性
                    defaultChecked: true,  // 设置默认选中
                }
            }
        },
    },

官方给出的配置

<a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
</a-table>

  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, ‘selectedRows: ‘, selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === ‘Disabled User‘, // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },

vue标签

原文：https://www.cnblogs.com/shanlaotou/p/14661497.html