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/getTransferDeptListlet url = '';if(this.activeName === 'first') {url = 'web/deptTransfer';// 提交数据 回调做处理deptTransfer(url,data).then( res =>{if(res.data.code === 200 ){that.allotForm = false;// 清除loadingdone();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;// 清除loadingdone();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）：组件下拉自定义