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);
},

提示效果如下：

vue:表格中多选框的处理

推荐阅读