1. 通常のデマンド利用
antd-vue テーブルの
公式サンプルコードは次のとおりです。
<template>
<a-table :rowKey="record=>record.id" :row-selection="rowSelection" :columns="columns" :data-source="data">
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
<a>{
{ text }}</a>
</template>
</template>
</a-table>
</template>
<script>
import {
defineComponent } from 'vue';
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
}];
export default defineComponent({
setup() {
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${
selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'lee', // name为lee的行，禁止选中
// Column configuration not to be checked
name: record.name,
}),
};
return {
data,
columns,
rowSelection,
};
},
});
</script>
重要なポイントは次のとおりです。
rowKey選択した行のキーワードに対して設定する必要があります。！！！！！- tableタグの
row-selection設定項目を設定する row-selection設定項目にはonChange&を含める必要がありますgetCheckboxProps
2.特別なニーズのための使用
テーブルの選択ボックスを表示するかどうかを動的に切り替える必要がある
2.1 緩和策
動的にクラスを切り替えるスタイルは次のとおりです
.ant-table-selection-column {
display: none;
}
2.2 根本的な解決策
構成row-selection中の判断のもう 1 つのステップは次のとおりです。
:row-selection="inner ? rowSelection : undefined"
値が未定義の場合