AntdesignVue a-table 选项禁用问题以及数据显示处理和点击行选中问题
1、控制选项禁用2、用具名插槽处理数据显示。
·
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
}
}
}
},
更多推荐
已为社区贡献19条内容
所有评论(0)