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

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

1.效果

2.主要代码详解

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

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

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

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

    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.完整代码

<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-selectv-model="scope.row.old_user"@change="handleChange('前人员', scope.$index, scope.row.old_user)"filterablesize="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-selectv-model="scope.row.new_user"@change="handleChange('后人员', scope.$index, scope.row.new_user)"filterablesize="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>

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