1、控制选项禁用 2、用具名插槽处理数据显示 3、添加属性解决行选中问题

      <a-card :hoverable="true" class="ms-card__main b-margin">
        <a-table
          :row-selection="{selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: chargeDetailCheckBox,
          columnWidth: 25}"
          :columns="orderColumns"
          bordered
          :row-key="record => record.registrationId"
          :data-source="orderList"
          :pagination="false"
          :scroll="{y: orderList.length > 0 ? 'calc(100vh - 455px)' : '0'}"
        >
          <template slot="reportStatus" slot-scope="record">
            <span v-if="record === '0'">未出报告</span>
            <span v-if="record === '1'">已出报告</span>
          </template>
          <template slot="selfPrintStatus" slot-scope="record">
            <span v-if="record === '0'">未打印</span>
            <span v-if="record === '1'">已打印</span>
          </template>
</a-table>
      </a-card>
    // 控制选项禁用 多个状态这样写
    chargeDetailCheckBox(record) {
      return {
        props: {
          disabled: record.reportStatus === '0' || record.selfPrintStatus === '1',
          // disabled: this.menuData.processStatus === 5,
          name: record.reportStatus || record.selfPrintStatus
        }
      };
    },

行选中问题解决如下 多选 和取消选中

<a-card :hoverable="true" class="ms-card__main b-margin">
        <a-table
          :row-selection="{selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: checkBoxFun,
          columnWidth: 25}"
          :columns="orderColumns"
          bordered
          :row-key="record => record.registrationId"
          :data-source="orderList"
          :pagination="false"
          :scroll="{y: orderList.length > 0 ? 'calc(100vh - 455px)' : '0'}"
          :custom-row="onClickRow"
        >
          <template slot="reportStatus" slot-scope="record">
            <span v-if="record === '0'">未出报告</span>
            <span v-if="record === '1'">已出报告</span>
          </template>
          <template slot="selfPrintStatus" slot-scope="record">
            <span v-if="record === '0'">未打印</span>
            <span v-if="record === '1'">已打印</span>
          </template>
</a-table>
      </a-card>
// table行点击
    onClickRow(record) {
      return {
        on: {
          click: () => {
            const rowKeys = this.selectedRowKeys
            if (rowKeys.length > 0 && rowKeys.includes(record.registrationId)) {
              rowKeys.splice(rowKeys.indexOf(record.registrationId), 1)
            } else {
              if (record.reportStatus === '1' && record.selfPrintStatus === '0') {
                rowKeys.push(record.registrationId)
              }
            }
            this.selectedRowKeys = rowKeys;
            this.pickReportNum = this.selectedRowKeys.length
          }
        }
      }
    },
Logo

前往低代码交流专区

更多推荐