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

    提示效果如下:

  • 相关阅读:
    从win到多系统
    markdown编辑器抉择经历(做笔记多系统用户)
    最新的hosts
    Hosts 长期更新【已停】
    设备选型(选择交换机、选择路由器的技能指标)
    传输控制协议(TCP)
    数据的封装与解封装
    网络分类及OSI七层模型
    第一课 IP通信
    Twilio收发短信笔记
  • 原文地址:https://www.cnblogs.com/zwh0910/p/14171281.html
Copyright © 2020-2023  润新知