批量设置表格里某个字段vue+element

HTML

  <el-button icon="el-icon-edit-outline" type="primary" size="mini" :disabled="multiple"
        @click="handleBatchAddOrderStatus">批量设置订单状态</el-button>

        <el-table-column type="selection" width="50" align="center" />



 <!-- 批量设置订单状态 -->
    <el-dialog title="批量设置订单状态" :visible.sync="dialogLabelOpen" width="500px">
      <el-form ref="labelForm" :model="labelForm" :rules="labelRules" label-width="80px" class="form-style">
        <el-row>
          <el-col :span="24">
            <el-form-item label="订单状态" prop="state">
              <el-select v-model="labelForm.state" placeholder="请选择订单状态" clearable size="small">
                <el-option v-for="dict in DeliverList" :key="dict.id" :label="dict.name" :value="dict.id" />
              </el-select>
              <!-- <el-input v-model="labelForm.state" /> -->
              <!-- <el-button type="primary" @click="DeliverUpdate()">已发货
						</el-button> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitLabelForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

// 非多个禁用
        multiple: true,
        labelForm: {},
        dialogLabelOpen: false,
 // 校验
        labelRules: {
          state: [{
            required: true,
            message: '请选择订单状态',
            trigger: 'blur'
          }]
        },
DeliverList: [{
          id: 1,
          name: '已发货'
        }],

 // 多选框选中数据
      handleSelectionChange(selection) {
        //this.ids = selection.map((item) => item.id)
        //this.single = selection.length != 1
        this.multiple = !selection.length
        console.log('selection',selection)
      },
      // 点击批量设置订单状态
      handleBatchAddOrderStatus(row) {
        // this.reset()
        const goodsId = row.id || this.ids
        this.orderIdList = goodsId
        // this.labelForm.orderIdList = goodsId
        // 订单状态下拉
        // this.getLabelList()
        this.dialogLabelOpen = true
      },
     // 订单状态下拉--根据需要添加
      getLabelList() {
        getLabelList({}).then((res) => {
          if (res.code == 100) {
            this.labelList = res.info
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      },
      DeliverUpdate() {
        this.isDeliver = true
        console.log(this.labelForm)
      },
      // 批量设置订单状态-确定
      submitLabelForm: function() {
        this.$refs['labelForm'].validate((valid) => {
          if (valid) {
            console.log(this.labelForm)
            // this.labelForm.state = Number(this.labelForm.state)
            // batchShipped(this.labelForm.orderIdList).then((data) => {
            batchShipped({orderIdList: this.orderIdList})
            .then((data) => {
              if (data.code === 100) {
                this.$message({
                  type: 'success',
                  message: data.info
                })
                this.dialogLabelOpen = false
                this.getList()
              } else {
                this.$message({
                  type: 'error',
                  message: data.msg
                })
              }
            })
          }
        })
      },
      // 取消按钮
      cancel() {
        this.reset()
        // 批量设置订单状态
        this.dialogLabelOpen = false
        // 详细介绍弹出层
        this.dialogIntroduce = false
        // 批量设置流程
        this.dialogLabelOpenProcess = false
      },