element table複数選択で行を無効にする
ビジネスシーン:複数選択テーブルの行を選択できません
次の図の効果を実現:
あまり話さないで、直接コードをつけます.
バックエンドdataはデータを返す
呼び出し方法
selectableメソッドは、複数選択tableテーブルでのみ有効であり、el-table-columnに書く必要があり、falseを返すときに選択を無効にします.
次の図の効果を実現:
あまり話さないで、直接コードをつけます.
{{ scope.row.appendixName || '-' }}
バックエンドdataはデータを返す
tableData: [
{
appendixName: '1. .pdf',
appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
id: 5,
isHidden: 0,
name: '123',
no: 0,
workId: 61
},
{
appendixName: '1. .pdf',
appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
id: 5,
isHidden: 1,
name: '123',
no: 0,
workId: 61
},
{
appendixName: '1. .pdf',
appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
id: 5,
isHidden: 1,
name: '123',
no: 0,
workId: 61
},
{
appendixName: '1. .pdf',
appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
id: 5,
isHidden: 0,
name: '123',
no: 0,
workId: 61
},
{
appendixName: '1. .pdf',
appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
id: 5,
isHidden: 0,
name: '123',
no: 0,
workId: 61
}
]
呼び出し方法
selectable (row, index) {
return row.isHidden === 0 // isHidden 0- 1- false
}
selectableメソッドは、複数選択tableテーブルでのみ有効であり、el-table-columnに書く必要があり、falseを返すときに選択を無効にします.