Avue表单select相关

发布时间：2023-07-06 16:30:16 修改时间：2023-07-06 16:30:16 阅读：1373 评论：0 0

Avue表单select相关

avue版本：2.10+

先上效果图：





html部分


<template>

<avue-form ref=""   :option="allotDevice" v-model="allotDeviceData" @submit="transferCompanySubmit">

              <template slot-scope="scope" slot="deviceIds">

                <div>

  <el-tag >{{JSON.stringify(allotDeviceData.deviceIds)}}</el-tag>

                  <avue-select v-model="allotDeviceData.deviceIds" placeholder="请选择内容" 

type="tree" multiple  :dic="allotDeviceDataSelect" ></avue-select>

                </div>

              </template>

            </avue-form>

</template>

js部分：


data() {

return{

allotDeviceDataSelect : [

                    {

                        label:'选项1',

                        desc:'描述1',

                        value:0

                    },{

                        label:'选项2',

                        desc:'描述2',

                        value:2

                    },{

                        label:'选项3',

                        desc:'描述3',

                        value:3

                    },{

                        label:'选项4',

                        desc:'描述4,

                        value:4

                    }

                ];

allotDeviceData:{},

allotDevice:{

                  emptyBtn: false,

                  labelWidth: 120,

                  column: [

                      {

                          label:'划拨设备',

                          prop:'deviceIds',

                          span:24,

                          filterText:'输入搜索文本',

                          multiple:true,

                          type:'tree',

                          formslot:true,

                          zh: '划拨设备',

                          en: 'allot device',

                          rules: [{

                              required: true,

                              message: this.$t('department.companyDevice'),

                              trigger: "click"

                          }]

                      },                  

]

                },

}

}

// function附加 --划拨操作提交

            transferCompanySubmit(data, done) {

              const that = this;

                // 按照选项卡判断提交接口 deptTransfer

                // 提交划拨企业 web/getTransferDeptList

                let url = '';

                if(this.activeName === 'first') {

                    url = 'web/deptTransfer';

                    // 提交数据 回调做处理

                    deptTransfer(url,data).then( res =>{

                        if(res.data.code === 200 ){

                            that.allotForm = false;

                            // 清除loading

                            done();

                            this.$router.go(0);

                            return this.$message.success('划拨设备成功')

                        }else{

                            done();

                            return this.$message.error(res.data.msg)

                        }

                    })

                }

                // 提交划拨设备

                if(this.activeName === 'second') {

                    url = 'api/device/subordinateChange';

                    // 提交数据 回调做处理

                    deviceTransfer(url,data).then( res =>{

                        if(res.data.code === 200 ){

                            that.allotForm = false;

                            // 清除loading

                            done();

                            this.$router.go(0);

                            this.$message.success('划拨设备成功')

                        }else{

                            this.$message.error(res.data.msg)

                            done();

                        }

                    })

                }

            }

select相关部分属性说明：

type（String ）：select | cascade | tree

prop（String）: 关键字

rules（Array）：验证规则

tags（Boolean）：多选时是否将选中值按文字的形式展示

filterable（Boolean）：是否可搜索





级联：

cascaderItem（Array）：级联的子节点prop

cascaderIndex（Number）：级联的默认选项序号

multiple（Boolean）：多选





远程搜索

remote（Boolean）：是否为远程搜索

dicUrl（String）：远程数据获取地址’url/{{key}}’ key为当前prop值

props（Object）：远程回传数据字段处理 label为值，value为键

lazy（Boolean）：是否懒加载

lazyLoad（Function）懒加载的回调 (node, resolve）





自定义方法：

formslot（Boolean）：表单自定义

labelslot（Boolean）：表单标题自定义

errorslot（Boolean）：表单错误自定义

typeslot（Boolean）：组件下拉自定义

————————————————

版权声明：本文为CSDN博主「Mr.T's Blog」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_27751965/article/details/116795116

---