vue多选框

vue多选框

多选框(选中传id)

效果图

点击确定后传入后台id

前端具体实现-vue+elementui

前台变量
首先使用selecctDeptMent方法
从后台数据库，查询到所有的部门信息，存入到optionList中
然后取出这个部门名称

const options = ref([])

//代码修改    /** 新增按钮操作 */
const optionsList = ref([]);
const selectedOptions = ref([]);
function handleAdd() {
  reset();
  open.value = true;
  selectDeptMent()
  title.value = "添加订单";
}
function selectDeptMent(){
  searchDept().then(response=>{
    optionsList.value = response.rows;
  })
}

之后从optionList中，读出来这个名称
和id，名称是{{option.deptName}}，id卸载checkbox中的label
这样选中之后会往后台传id，selectedOptions是一个数组
多选之后自动添加

   <el-checkbox-group v-model="form.selectedOptions">
            <div v-for="option in optionsList" >
              <el-checkbox :label="option.deptId"  v-model="selectedOptions">{{option.deptName}}</el-checkbox>
            </div>
          </el-checkbox-group>

点击添加之后触发add方法
form可以自己添加属性
例如
form,,这里的model是form
之后是form.orderDepartment

    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="sumRef" :model="form" :rules="rules" label-width="80px">
<!--        <el-form-item label="订单编号" prop="orderId">-->
<!--          <el-input v-model="form.orderId" placeholder="请输入订单编号" />-->
<!--        </el-form-item>-->
        <el-form-item label="评审部门" prop="orderDepartment">
<!--          <el-input v-model="form.orderDepartment" placeholder="请输入评审部门" />-->
          <el-checkbox-group v-model="form.selectedOptions">
            <div v-for="option in optionsList" >
              <el-checkbox :label="option.deptId"  v-model="selectedOptions">{{option.deptName}}</el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
<!--        <el-form-item label="客户id" prop="customerId">-->
<!--          <el-input v-model="form.customerId" placeholder="请输入客户id" />-->

<!--        </el-form-item>-->
        <el-form-item label="客户名称">
          <el-select label="客户名称" v-model="form.customerId" @click="getCustomer" placeholder="请选择">
            <el-option v-for="option in options"
                       :key="option.customerName"
                       :label="option.customerName"
                       :value="option.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单进度" prop="orderProgress">
          <el-input v-model="form.orderProgress" placeholder="请输入订单进度" />
        </el-form-item>
        <el-form-item label="评审进度" prop="reviewProgress">
          <el-input v-model="form.reviewProgress" placeholder="请输入评审进度" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

 form: {},

/** 提交按钮 */
function submitForm() {
  proxy.$refs["sumRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateSum(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addSum(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}