Avue的v2版本是一个基于element-ui低代码前端框架，Avue的v3是一个基于element-plus低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。
一、组件引入
<avue-crud :option="option"
:search.sync="search"
:table-loading="loading"
:data="data"
ref="crud"
v-model="form"
:permission="permissionList"
@row-del="rowDel"
@row-update="rowUpdate"
@row-save="rowSave"
:before-open="beforeOpen"
:page.sync="page"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad">
</avue-crud>
数据设置
export default {
data() {
return {
option: {
height: 'auto',
calcHeight: 80,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
selection: true,
viewBtn: true,
dialogType: 'drawer',
dialogClickModal: false,
column: [],
group: [
{
label: '基础信息',
prop: 'baseInfo',
icon: 'el-icon-user-solid',
column: []
},
{
label: '详细信息',
prop: 'detailInfo',
icon: 'el-icon-s-order',
column: []
},
{
label: '职责信息',
prop: 'dutyInfo',
icon: 'el-icon-s-custom',
column: []
}
]
},
};
}
}
现需要给基础信息中添加一个性别选择的下拉框，数据交互可以去本地，也可从后端获取
二、交互本地数据
{
label: '基础信息',
prop: 'baseInfo',
icon: 'el-icon-user-solid',
column: [
{
label: "用户性别",
prop: "sex",
type: "select",
dicData: [
{
label: "男",
value: 1
},
{
label: "女",
value: 2
},
{
label: "未知",
value: 3
}
],
hide: true
}
]
},
三、交互后端数据
{
label: '基础信息',
prop: 'baseInfo',
icon: 'el-icon-user-solid',
column: [
{
label: "用户性别",
prop: "sex",
type: "select",
# 请求后端的路径
dicUrl: "/api/getSexList",
dicData: [],
props:{
value: "value",
label: "label",
},
]
},