foreword
The el-tablenested el-selectoperation is very common. Recently, two types of drop-down items have been disabled, so let’s sort it out briefly.
Do not allow repeated selection
This situation is basically single selection, so here is based on single selection. As shown in
the figure above, it is required that the hobby does not allow repeated selection. When Zhang San chooses to read, Li Si is not allowed to choose a hobby. That is to disable the reading in Li Si's drop-down
full code
<template>
<el-table :data="tableData" border style="width:400px">
<el-table-column prop="name" label="姓名" width="200" />
<el-table-column prop="hobby" label="爱好" width="200">
<template #default="{ row }">
<el-select v-model="row.hobby">
<el-option v-for="item in hobbyList" :key="item.value"
:label="item.label" :value="item.value"
:disabled="isDisabled(item)"
/>
</el-select>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import {
ref } from 'vue';
const tableData = [
{
name: '张三',
hobby: undefined
},
{
name: '李四',
hobby: undefined
}
];
const hobbyList = ref([
{
value: 'read',
label: '阅读'
},
{
value: 'movie',
label: '电影'
},
{
value: 'football',
label: '足球'
}
]);
// 判断是否禁用
const isDisabled = item => {
// 获取所有已经选择了的爱好列表
const list = tableData.map(e => e.hobby);
// 判断下拉项是否再列表里，存在则禁用
return list.includes(item.value);
};
</script>
The renderings are as follows:
mutually exclusive
This one is multi-choice, as shown in the figure below: When any one of reading, power supply, and football is selected, the other two can continue to be selected, but it is not allowed to choose all; if all are selected, it is not allowed to choose reading, Any one of power supply, football (of course this example is not suitable)
code
<template>
<el-table :data="tableData" border style="width:400px">
<el-table-column prop="name" label="姓名" width="200" />
<el-table-column prop="hobby" label="爱好" width="200">
<template #default="{ row }">
<el-select v-model="row.hobby" multiple>
<el-option v-for="item in hobbyList" :key="item.value"
:label="item.label" :value="item.value"
:disabled="isDisabled(row,item)"
/>
</el-select>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import {
ref } from 'vue';
const tableData = [
{
name: '张三',
hobby: []
},
{
name: '李四',
hobby: []
}
];
const hobbyList = ref([
{
value: 'read',
label: '阅读'
},
{
value: 'movie',
label: '电影'
},
{
value: 'football',
label: '足球'
},
{
value: 'all',
label: '全部'
}
]);
// 判断是否禁用
const isDisabled = (row, item) => {
if (Array.isArray(row.hobby) && row.hobby.length > 0) {
if (row.hobby.includes('all')) {
// 选择的是全部，值不是全部的则禁用
return item.value !== 'all';
} else {
// 选择的是阅读、足球、电影中的任何一个
return item.value === 'all';
}
} else {
// 没有选择，或者是全部情况的情况
return false;
}
};
</script>
renderings
