el-select禁用功能扩展

需求

1. 表格中下拉单选，第一行选择了A，第二行不能再选A
2. 多选，下拉选中有‘全部’选项，选了‘全部’不能选其余的，选了其余的不能选‘全部’

需求1 代码

1.1 表格中下拉选

<el-table :data="tableData" border style="width: 400px">
    <el-table-column prop="name" label="姓名" width="200"></el-table-column>
    <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-option>
            </el-select>
        </template>
    </el-table-column>
</el-table>

1.2 判断置灰

<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>

效果：

---

需求2 代码

1.1 表格中下拉选

<el-table :data="tableData" border style="width: 400px">
    <el-table-column prop="name" label="姓名" width="200"></el-table-column>
    <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-option>
            </el-select>
        </template>
    </el-table-column>
</el-table>

1.2 判断置灰

<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>

效果：