将两个回显的数据变为一个使两个地方都显示这个总回显-Toy模板网

这篇具有很好参考价值的文章主要介绍了将两个回显的数据变为一个使两个地方都显示这个总回显。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

 <el-col :span="8">
        <el-form-item :label="`第${index + 1}位监督检查人`" style="margin-left: -40px" required>
          <el-select v-model="item.superviseName" filterable :placeholder="`请选择第${index + 1}位监督检查人`">
            <div v-if="item.isSpDept === 'Y'">
              <el-option v-for="option in userList" :key="option.userId" :label="option.label"
                         :value="option.userId">
              </el-option>
            </div>
            <div v-else>
              <el-option v-for="option in otherUserList" :key="option.userId" :label="option.label"
                         :value="option.userId">
              </el-option>
            </div>
          </el-select>
        </el-form-item>
      </el-col>        


userList: [],
otherUserList: [],              






created() {
let _this = this;
this.user = this.$store.getters.user;
this.form.createByName = this.user.nickName;
// this.form.caseType=this.radio;
console.log(_this.source === 0)
if (this.source === 0) {
  console.log(this.source, '来源类型')
  _this.sourceType = 0
}
// 回显详情
console.log(this.caseId, 'id')
if (this.caseId !== "") {
  caseDetail({
    caseId: this.caseId
  }).then((response) => {
    console.log(response.data, '结果')
    if (response.data) {
      response.data = this.delEmptyQueryNodes(
        this.delEmptyQueryNodes(response.data)
      );
      this.form = response.data;
      this.radio = this.form.caseType;
      this.radioClient = this.form.clueType == 1 ? "单位" : "个人";
      console.log("form值", this.form);
      this.form.createByName = this.user.nickName;
      if (this.form.checkUserList == "") {
        this.form.checkUserList = [];
      }
      // 县局科室登记案源 默认为分流 不需要再选择分流方式
      // 县局人员判断条件为当前用户dept_info_id字段是否为101 是101 为县局人员，非101 则为分局或大队人员
      if (String(this.$store.state.user.user.deptInfoId) == "101") {
        // 0:备案  1：分流
        this.form.recordFlag = "1";
      }
    }
  });
} else {
  // 县局科室登记案源 默认为分流 不需要再选择分流方式
  // 县局人员判断条件为当前用户dept_info_id字段是否为101 是101 为县局人员，非101 则为分局或大队人员
  if (String(this.$store.state.user.user.deptInfoId) == "101") {
    // 0:备案  1：分流
    this.form.recordFlag = "1";
  }
}
// 获取本单位人员下拉框
// isNotDeptInfo:为空则默认查询本单位  不为空则默认查询非本单位人员
listCheckUser(2, true).then((response) => {
  this.userList = response.rows.map((d) => {
    d.label = `${d.nickName}`;
    return d;
  });
});

// 获取其他单位人员下拉框
// isNotDeptInfo:为空则默认查询本单位  不为空则默认查询非本单位人员
listCheckUser(1, true, true
).then(
  (response) => {
    this.otherUserList = response.rows.map((d) => {
      d.label = `${d.nickName}`;
      if (d.deptInfoName) {
        d.label = `${d.nickName}(${d.deptInfoName})`;
      }
      return d;
    });
  }
);将两个回显数据加在一起  使合并的回显数据同时在“本单位”和“其他单位”之间进行选择。

完善:

要将两个回显数据加在一起，您可以使用 concat() 方法将 userList 和 otherUserList 数组合并为一个新的数组，并将该数组赋给一个新的属性，例如 combinedUserList。然后，将 combinedUserList 用于渲染 <el-select> 组件的选项列表。

以下是一种可能的实现方法：

首先，在 data 中添加一个新的属性 combinedUserList

data() {
  return {
    userList: [],
    otherUserList: [],
    combinedUserList: [],
    // ...
  };
},

然后，在 created 钩子函数中，将 userList 和 otherUserList 数组合并到 combinedUserList

created() {
  // ...
  listCheckUser(2, true).then((response) => {
    this.userList = response.rows.map((d) => {
      d.label = `${d.nickName}`;
      return d;
    });
    
    this.combinedUserList = this.userList.concat(this.otherUserList);
  });

  // ...
},

最后，将 combinedUserList 用于渲染 <el-select> 组件的选项列表

<el-select v-model="item.superviseName" filterable :placeholder="`请选择第${index + 1}位监督检查人`">
  <el-option v-for="option in combinedUserList" :key="option.userId" :label="option.label" :value="option.userId"></el-option>
</el-select>

现在，combinedUserList 数组包含了 userList 和 otherUserList 的合并结果，可以使用该数组同时在“本单位”和“其他单位”之间进行选择文章来源地址https://www.toymoban.com/news/detail-823152.html

到了这里，关于将两个回显的数据变为一个使两个地方都显示这个总回显的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！