vue 項目 多選 問題

近期 vue 項目用到多選功能，引用的elementUI的級聯多選 Cascader，但是沒有效果。

后來發現是elementUI版本問題，我們項目用的是2.7.2版本，版本太低。

后來 卸載了 重新安裝的 2.12.0版本的elementUi.

在后面中 添加  修改 批量修改的 多選框用的同一個組件。只需 判斷他進入的是 添加 還是 修改或者批量修改

可以通過判斷 該數據的id  新加的是沒有id的  修改 有一個id  批量修改有多個id

剛開始進入頁面 得到所有數據：

 

 

 點擊彈框按鈕

 

 

 

 

 

 

 

 

 根據點擊的按鈕不同 配置組件

openCallback(defObj, val) {
      let title = "編輯分組";
      // console.log(val)
      let params = {
        title: title,
        open: true,
        data: {
          remark: val.remark || "",
          riskType: val.riskType || "",
          groupName: val.groupName || "",
          // departmentName: val.departmentName || [],
          id: val.id,
          valid:val.valid || []
        }
        
      };

     if (val === "add") {
        params.title = "新增分組";
        delete params.id;
      }
      // 批量修改
      // console.log(val)
      else if (val === "update") {
        // console.log( this.dialog.data)
       
        if (!this.dialog.data.tableSelectArr || this.dialog.data.tableSelectArr.length <= 0) {
          this.warn("請選擇要設置的敏感詞");
          return;
        } else if (this.dialog.data.tableSelectArr.length > 100 || this.dialog.data.tableSelectArr.length == 1) {
          return this.warning(
            `單次最少允許分配[2]個敏感詞,最多允許分配[100]個敏感詞, 當前已選[${this.dialog.data.tableSelectArr.length}]個敏感詞`
          );
        }
        params.title = "批量修改";
        params.data = {
          remark: val.remark || "",
          riskType: val.riskType || "",
          groupName: val.groupName || "",
          departmentName: val.departmentName || [],
          id: this.dialog.data.tableSelectArr || []
        };
      }
      this.dialog = params;
    },

最后提交時，新增 修改 批量修改 提交不同的接口

在確定提交按鈕中判斷：

sureCallback(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log(this.dialog.data.id)
          if (
            this.dialog.data.id &&
            typeof this.dialog.data.id.length == "undefined"
          ) {
            this.editCallback();
          } else if (this.dialog.data.id && this.dialog.data.id.length > 1) {
            this.updateCallback();
          } else {
            this.addCallback();
          }
        } else {
          return false;
        }
      });
    },

在選擇多選中，

 

 

因為新增 修改 批量修改 公用一套組件。這里 v-module 的值是從父組件傳過來的，父組件根據不同的功能進行了配置。（見上面配置組件）

因為是擁有多級 多選，類似下圖：

 

 

 在向后台提交數據時，只提交最后一級即可。但是在修改時要勾選上原來擁有的數據，要綁定的是一 二 三 級（所有級）的 id （子節點和其所有父節點的id）

因為有多級批量修改，所以后台 返回的 數據的id 是個二維數組，在展示時，如果有，會默認勾選上該節點。 最里面的一層數組包裹的是子節點和其所有父節點的id，外面一層數組包裹的是要修改的多個用戶。

在確認提交時，要遍歷這個二維數組，只需拿到每個用戶的最后一級子節點

getStaffValid(value){
      // console.log(value)
      let  staffsId = []
      value.forEach(function(v,i){ 
        const staffs = value[i]
        const staffId = staffs[staffs.length-1]
        staffsId.push(staffId)
       
      })
      // console.log(staffsId)
      this.dialog.data.valid = staffsId
    
    }

即可。

在獲取用戶的數據展示多選按鈕時，后台返回的是 多層 id，name,格式。例如

  [{
      id:1,
      name:'王一博',
      children:[
        {id:2,
        name:'摩托',
        children:[
          {
            id:3,
            name:'滑板'
          }
        ]}
      ]
    }]

需要嵌套遍歷，將id，name分別對應：value 和  label，格式如下：

   [{
          value: 1,
          label: '東南',
          children: [{
            value: 2,
            label: '上海',
            children: [
              { value: 3, label: '普陀' },
              { value: 4, label: '黃埔' },
              { value: 5, label: '徐匯' }
            ]
          },]
    }]

代碼

 getStaff() {
      v2riskManagementApi.getStaffId().then(data => {
        // console.log(data);
        const arr = (data || []).map(v => this.convertData(v.id, v.name, v));
        // console.log(arr);
        this.options = arr;
      });
    },
    //
    convertData(value, label, data) {
      let dataObj = {
        value,
        label,
        data
      };
      if (data.children && data.children.length) {
        dataObj.children = data.children.map(v =>
          this.convertData(v.id, v.name, v)
        );
      }
      return dataObj;
    },