vue table標簽

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,
          },
        }),
      };
    },
  },