首页 > 网络编程 > JavaScript > element-ui select多选绑定回显值问题

element-ui select多选绑定回显值问题

福牛 4月 05, 2023 107 0

element-ui select多选绑定回显值

-1

这是要最后实现的效果。

  1.      <el-form-item label=“机组名称” prop=“unitName”>
  2.      <el-select
  3.      v-model=“unitName”
  4.      multiple
  5.      placeholder=“请选择”
  6.      @change=“unitChange”
  7.      >
  8.      <el-option
  9.      v-for=“item in jzmcOption”
  10.      :key=“item.unitId”
  11.      :label=“item.unitName”
  12.      :value=“item.unitId”
  13.      ></el-option>
  14.      </el-select>
  15. </el-form-item>

unitName 绑定的值是一个数组,jzmcOption是根据接口查出来的下拉框的数据。

后台要接收的是一个逗号分隔开的字符串，要接收id值和name值

  1. unitName:[],
  2. jzmcOption:[],
  1.      unitChange(val) {
  2.          console.log(val);
  3.          let str = val.join(‘,’);
  4.          let name = ”;
  5.          this.jzmcOption.map((v, i) => {
  6.          val.map((a, b) => {
  7.              if (a == v.unitId) {
  8.              name += ‘,’ + v.unitName;
  9.              }
  10.          });
  11.          });
  12.          name = name.substring(1);
  13.          this.jydyForm.unitName = name;
  14.          this.jydyForm.unitId = str;
  15.      },

-2

这个是下拉框数据变化时获取到的数据。

在jzmcOption里找到他的name值拼起来用逗号隔开。

回显部分，逻辑是已经选中过的值，后台不会再返回了，所以我们需要将现在已经选中的数据跟后台查出来的数据拼起来，组成编辑时可选的新的下拉框。

  1.      // 查看 编辑
  2.      handleCheckLxr(row, status) {
  3.          //将id值赋值给下拉框绑定的值
  4.          this.unitName = this.jydyForm.unitId.split(‘,’);
  5.  
  6.          let i = this.jydyForm.unitId.split(‘,’);
  7.          let n = this.jydyForm.unitName.split(‘,’);
  8.          let list = [];
  9.          i.map((v, i) => {
  10.          list.push({ unitId: v, unitName: n[i] });
  11.          });
  13.          this.jzmcOption = [];
  14.          getChooseByCustomerId(this.currentCustomerId).then(res => {
  16.          if (res.rel) {
  17.              let list_o = res.data.rows;
  18.              this.jzmcOption = […list_o,…list];
  19.          }
  20.          });
  21.      },

回显时可能会遇到已经选中的值，没有在下拉数据中选择，可能是数据类型的问题，需要处理下。

element-ui下拉多选数据回显时无法进行修改

解决方案

在el-select添加@change事件，执行强制刷新this.$forceUpdate()。

示例：

  1. <el-select @change=“selectChangeHandle” …>…</el-select>
  1. selectChangeHandle(){
  2.      this.$forceUpdate()
  3. }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论