vue:表格中多選框的處理

效果如下：

template中代碼如下：

<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      highlight-current-row
      @selection-change="selectChanges"
    >
      <el-table-column type="selection" width="40"/>
      <el-table-column label="采購訂單編號" align="center">
        <template slot-scope="scope">{{ scope.row.inNo }}</template>
      </el-table-column>
</el-table>

js中代碼如下：

selectChanges: function(val) {
        // console.log(val)
        this.selected = []
        val.forEach(obj => {
          this.selected.push(obj)
        })
        this.selected.forEach(item => {
          const data = {
            inDetailId: item.id
          };
          // 獲取已收貨的重量
          supply.initNum(data).then(response => {
            // console.log(response)
            if (response.success) {
              if(response.data) {
                item.num = response.data.num
              } else {
                item.num = ''
              }
            } else {
              this.$message.error(response.msg);
            }
          });
        })
      },

注意：val是數組，也可以如下處理：

selectChanges(val) {
      this.selected = val;
    },

 注意：如果沒有勾選多選框，則在點擊按鈕進行下一步操作時要先判斷數組this.selected是否有值，如果沒有則進行提示，而不是直接進行下一步操作代碼如下：

<el-form-item>
        <el-button type="primary" style="margin-left: 620px;" @click="addManySupplyNote" >創建多個供貨通知單</el-button>
</el-form-item>
addManySupplyNote() {
        // console.log(this.selected)
        if (this.selected.length == 0) {
          this.$message.warning("沒有勾選訂單，無法創建")
          return;
        }
        this.$refs['add-supplyNote'].openDialog(this.selected);
},

提示效果如下：