首页 > 其他分享 >vue多选框

vue多选框

时间:2023-07-31 17:34:21浏览次数:37  
标签:vue form -- value id 选框

vue多选框

多选框(选中传id)

效果图

image
点击确定后传入后台id
image

前端具体实现-vue+elementui

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

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

标签:vue,form,--,value,id,选框
From: https://www.cnblogs.com/hellojianzuo/p/17593976.html

相关文章

  • vue实现浏览器端大文件分块上传
    ​ 这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数下面直接贴代码吧,一些难懂的我大部分都加上注释了:上传文件实体类:看得出来,实体类中已经有很多我们需要的功能了,还有实用的属性。如MD5秒传的信息。pub......
  • VUE3、ElementPlus 重构若依vue2 表单构建功能
    Vue3+ElementPlus+Vite重构若依Vue2表单构建功能若依官方的Vue3版本发布已经有段时间了,就是这个表单构建功能一直没有安排计划去适配到Vue3!前段时间公司需要做个类似的功能,就直接借鉴若依Vue2的来直接改了吐槽下:vuedraggable-vue3坑真多,官方文档一言难尽,现在不推荐使......
  • 坑:vue2在props时仅接受第一次返回数据的解决办法
    今天在做项目时遇到了一个bug,在列表页进入详情页时带入list以便子组件遍历使用,使用props传参,该list在父组件由created生命周期函数访问接口获取,然后子组件在使用时,直接使用props接收并调用,大概代码如下://父组件<Child:list='list'/>...created(){getListApi().then(list......
  • 浅聊一下,React会不会被VUE取代?
    看到知乎上有比较多的类似问题,正好这两个框架在以往的一些项目中都有实践过,就借着本篇文章说说我个人的看法。 先摆个结论:不会,毕竟各有千秋,除非跨端框架有被更好的概念所替代,又或者App已经彻底过气了。 什么是React?什么是VUE?维基百科上的概念解释,Vue.js是一个用于创......
  • Vue打开新窗口
    方式一:openNewWindow(){const{href}=this.$router.resolve({path:"/preview",});window.open(href,"_blank","width=900,height=700");},方式二:<router-linktarget="......
  • VUE el-table表格实现双击编辑,单机空白处放弃修改,回车提交修改
    VUEel-table表格实现双击编辑,单机空白处放弃修改,回车提交修改template<el-row><el-col:span="24"><el-table@cell-dblclick="handleCellDBClick":data="tabledata"border><!--生成列--><......
  • vue2集成simple-mind-map思维导图,实现在线制作思维导图
    1.使用组件组件源码版本licensesimple-mind-map地址0.6.6MIT@toast-ui/editor地址3.1.5MITv-viewer地址1.6.4MITxlsx地址0.18.5Apache-2.0vue-i18n地址8.27.2MIT2.组件结构(部分)3.截图4.示例项目项目一:gitee......
  • vue 环境配置
    根目录下创建.env.env.production.env.development在vite.config.js中使用defineConfig(({mode})=>{constenv=loadEnv(mode,process.cwd());const{VITE_NODE_ENV}=env;})其他地方使用exportconstrequestURL=import.meta.env.VITE_APP_BASE_UR......
  • vue2集成bpmn流程图,可导入导出预览等
    1.使用到的组件组件源码版本licensebpmn-js地址7.3.1bpmn.iobpmn-js-properties-panel地址0.37.2MITcamunda-bpmn-moddle地址4.5.0MIT版本一定要对,否则可能会报错2.组件代码<template><divid="app"><divclass="container">......
  • vue + vite 在index.html中使用环境变量
    npminstallvite-plugin-html-Dvite.config.jsimport{createHtmlPluginasuseHtmlLoader}from'vite-plugin-html'useHtmlLoader({inject:{data:{title:VITE_APP_BASE_URL,},},}),index.html可以使用啦!!!<pclass=&quo......