Avue表单select相关

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）：组件下拉自定义