avue-crud中el-select的使用
Avue的v2版本是一个基于element-ui低代码前端框架，Avue的v3是一个基于element-plus低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。
一、组件引入
数据设置
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",
},
]
},