网站开发新闻管理系统的背景,下载长沙app,网站建设视频教程,购物平台推荐实现需求#xff1a;两个单选框内容两栋#xff0c;在选择第一个时#xff0c;第二个选框能自动更新对应选项。且在切换第一个选项内容时#xff0c;第二个选框会被清空且切换到新的对应选项。 设置值班班次和备班情况两个选项 #xff0c;完整代码如下#xff1a;
… 实现需求两个单选框内容两栋在选择第一个时第二个选框能自动更新对应选项。且在切换第一个选项内容时第二个选框会被清空且切换到新的对应选项。 设置值班班次和备班情况两个选项 完整代码如下
templatediv classcontent-boxdiv classcontainerel-select v-modelleftValue placeholder请选择 changehandleLeftChange!-- el-option v-ifleftOptions.length ! 0 label全选 valueall/el-option --el-option v-foritem in leftOptions :keyitem.value :labelitem.label :valueitem.value/el-option/el-selectel-selectstylemargin-left: 20pxchangehandleRightChangev-modelrightValuedisabledplaceholder请选择el-optionv-foritem in leftOptions:keyitem.value:labelitem.name:valueitem.id:disabledrightDisabledOptions.includes(item.value)/el-option/el-select/div/div
/templatescript
export default {data() {return {leftValue: [],rightValue: [],leftOptions: [{ value: 1, label: 白班, name: 否, id: 1 },{ value: 2, label: 夜班, name: 否, id: 2 },{ value: 3, label: 备班, name: 是, id: 3 },{ value: 4, label: 全班, name: 否, id: 4 },{ value: 5, label: 休班, name: 否, id: 5}],rightDisabledOptions: [],selectData: [],updSelect: [] //为了不影响原始数据不然原始数据勾选几次值全改变了};},mounted() {},methods: {handleLeftChange(value) {// 清空右边下拉框的选中值和禁用选项this.rightValue [];this.rightDisabledOptions [];this.selectData [];// 根据左边下拉框的选中值更新右边下拉框的选中值和禁用选项// 左右结构一定要有一样的值不然联动不了// 如果是全选,就让所有的select被选中if (value.includes(all)) {this.leftValue this.leftOptions.map((option) option.value);this.rightValue this.leftOptions.map((option) option.name);this.selectData this.leftOptions;} else {this.leftOptions.forEach((option) {// 如果左侧选中的包含右侧的value值if (this.leftValue.includes(option.value)) {this.rightValue.push(option.name);// 把option.id改为option.name,显示出来的才是是否this.selectData.push(option);} else {this.rightDisabledOptions.push(option.value);}});}this.updSelect JSON.parse(JSON.stringify(this.selectData));},// 右侧选择handleRightChange(value) {//将selectData值深拷贝给UpdSelectthis.updSelect JSON.parse(JSON.stringify(this.selectData));this.updSelect.forEach((item) {if (!value.includes(item.id)) {item.id -1;item.name ;}});console.log(this.updSelect, 解决);}}
};
/scriptstyle langscss scoped/style
由于第二个选框是和第一选框值同步的第一个框有五个值第二个框就也要五个选项即使是重复的值。为了看起来没那么杂乱我就把第二个选框禁用了反正值能自己更新
学习参考来源俩个el-select的联动选择_el-select 联动-CSDN博客
