avue-crud 组件，form中实现树形下拉框联动输入框数据，省市区字典联动

1、需要实现的功能是，当我选择一条数据的时候，后面几个输入框会自动带入

使用的是avue-crud组件

参数配置：

<avue-crud ref="crud" :data="data" v-mode='form' :option="option" ></avue-crud>{label:'下拉框',
prop:'prop',
type:'tree',
dicUrl:'xxx/xxx', // 使用前提是这个接口中存在需要配置的这三个参数
// 示例数据:[{prop:'111',liandong1:'111',liandong2:'2222'},{prop:'222',liandong1:'333',liandong2:'444'}]
props:{label:'name',value:'code',
},
slot:true,
nodeClick:(data)=>{// 节点点击的时候会获取到数据this.form.liandong1 = data.liandong1this.form.liandong2 = data.liandong2
}
},
{label:'联动1',prop:'liandong1'
},
{label:'联动2',prop:'liandong2'
}

2、省市区字典联动

官网示例：https://avuejs.com/crud/crud-dic/#%E5%AD%97%E5%85%B8%E8%81%94%E5%8A%A8

注意点：2.9.0+ 用cascader，以下用cascaderItem

联动只支持dicUrl远程字典

<avue-crud ref="crud" :data="data" :option="option" ></avue-crud><script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {data() {return {data: [{name:'张三',sex:'男',province: '110000',city: '110100',area: '110101',}, {name:'李四',sex:'女',province: '130000',city: '130200',area: '130202',}],option:{column:[{label:'姓名',prop:'name',}, {label:'性别',prop:'sex'},{label:'省份',prop:'province',type:'select',cascader: ['city'],cascaderIndex:1,props: {label: 'name',value: 'code'},dicUrl:`${baseUrl}/getProvince`},{width: 120,label: '城市',prop: 'city',type: 'select',cascader: ['area'],cascaderIndex:1,cell: true,props: {label: 'name',value: 'code'},dicUrl: `${baseUrl}/getCity/{{key}}`,rules: [{required: true,message: '请选择城市',trigger: 'blur'}]},{width: 120,label: '地区',prop: 'area',cell: true,props: {label: 'name',value: 'code'},type: 'select',dicUrl: `${baseUrl}/getArea/{{key}}`,rules: [{required: true,message: '请选择地区',trigger: 'blur'}]}]}}},mounted(){//放在数据加载完后执行this.$refs.crud.dicInit('cascader');}
}
</script>

avue-crud 组件，form中实现树形下拉框联动输入框数据，省市区字典联动相关推荐

element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
element做树形下拉_一个基于 elementUi 的树形下拉框组件vue
wl-vue-select,wl-tree-select 简介用于vue框架的树形下拉框及带全选的普通下拉框. Tree drop-down box for vue framework and or ...
EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例效果展示未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
easyui复杂表单_jQuery EasyUI 表单 – 创建树形下拉框（ComboTree） | 菜鸟教程
jQuery EasyUI 表单 - 创建树形下拉框树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
JavaScript树形下拉框
js库地址:https://github.com/hzwy23/Hselect 这个JS文件是对select标签的一个扩展,使得select能够支持树形下拉框 1.依赖关系: 使用这段js代码之前,请 ...
php 下拉树多项选择框,jQuery树形下拉框插件multipleTree升级
插件描述:tree是基于jqueryztree开发的树形下拉选择框插件,支持ie8+谷歌,火狐,360等浏览器(multipleTree升级版) 更新时间:2020-09-26 00:48:20 更新 ...
ExtJs6 form回显combo下拉框的值方法
一般grid加载出来值之后我们对某一行编辑时,打开form会出现远程查询下拉框值不会回显,也就是没有值的情况,我们可以按照以下方法让值回显. 比如说后端返回实体类中有cityId和cityName两个 ...
iview 下拉select样式_Vue.js相关：iview实现select tree树形下拉框的示例代码
Vue.js相关:iview实现select tree树形下拉框的示例代码发布于 2020-3-16| 复制链接摘记: 本文介绍了iview实现select tree树形下拉框的示例代码,分享给大 ...

avue-crud 组件，form中实现树形下拉框联动输入框数据，省市区字典联动

1、需要实现的功能是，当我选择一条数据的时候，后面几个输入框会自动带入

2、省市区字典联动

avue-crud 组件，form中实现树形下拉框联动输入框数据，省市区字典联动相关推荐

最新文章

热门文章