el-table中el-select俩列共用同一数据并且选择不能相同

需求：el-table中有el-select，el-select的下拉数据源是相同的，但是要同一行的俩列数据选择不相同，如果相同需要提示并且清空数据

1.效果

2.主要代码详解

主要是 @change="handleChange('后人员', scope.$index, scope.row.new_user)"

第一个属性是为了区分开前人员和后人员，第二个是当前行的索引值，第三个值是数据

html 复制代码

 <el-select
                        v-model="scope.row.new_user"
                        @change="handleChange('后人员', scope.$index, scope.row.new_user)"
                        filterable
                        size="small"
                        placeholder="请选择"
                    >
                        <el-option v-for="(item, index) in levelTable" :key="index" :label="item.label" :value="item.label"> </el-option>
                    </el-select>

differenceTable：table表格的数据，如果当前是前人员选择，并且后人员等于前人员那么就清空前人员的数据

javascript 复制代码

    handleChange(columnName, rowIndex, newValue) {
            let row = this.differenceTable[rowIndex];
            if (columnName === '前人员' && row.new_user === newValue) {
                // this.$message.error('前人员和后人员不能相同！');
                this.message = '前人员和后人员不能相同！';
                row.old_user = '';
            } else if (columnName === '后人员' && row.old_user === newValue) {
                row.new_user = '';
                this.message = '前人员和后人员不能相同！';
                // this.$message.error('前人员和后人员不能相同！');
            } else {
                this.message = '';
            }
        }

3.完整代码

javascript 复制代码

<template>
    <div style="width: 100%; height: 300px">
        <el-table :data="differenceTable" style="width: 400px; margin-top: 50px">
            <el-table-column prop="name" label="前人员">
                <template slot-scope="scope">
                    <el-select
                        v-model="scope.row.old_user"
                        @change="handleChange('前人员', scope.$index, scope.row.old_user)"
                        filterable
                        size="small"
                        placeholder="请选择"
                    >
                        <el-option v-for="(item, index) in levelTable" :key="index" :label="item.label" :value="item.label">
                        </el-option> </el-select></template
            ></el-table-column>
            <el-table-column prop="name" label="后人员">
                <template slot-scope="scope">
                    <el-select
                        v-model="scope.row.new_user"
                        @change="handleChange('后人员', scope.$index, scope.row.new_user)"
                        filterable
                        size="small"
                        placeholder="请选择"
                    >
                        <el-option v-for="(item, index) in levelTable" :key="index" :label="item.label" :value="item.label"> </el-option>
                    </el-select> </template
            ></el-table-column>
        </el-table>
        <span>{{ message }}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            differenceTable: [
                {
                    old_user: '',
                    new_user: ''
                }
            ],
            levelTable: [
                {
                    label: '张三',
                    value: 1
                },
                {
                    label: '李四',
                    value: 3
                },
                {
                    label: '王五',
                    value: 2
                }
            ],
            message: ''
        };
    },
    mounted() {},
    methods: {
        handleChange(columnName, rowIndex, newValue) {
            let row = this.differenceTable[rowIndex];
            if (columnName === '前人员' && row.new_user === newValue) {
                // this.$message.error('前人员和后人员不能相同！');
                this.message = '前人员和后人员不能相同！';
                row.old_user = '';
            } else if (columnName === '后人员' && row.old_user === newValue) {
                row.new_user = '';
                this.message = '前人员和后人员不能相同！';
                // this.$message.error('前人员和后人员不能相同！');
            } else {
                this.message = '';
            }
        }
    }
};
</script>

<style lang="scss" scoped></style>

文章到此结束，希望对你有所帮助~