1.后台请求初始化复选框
常用属性
type:input的话是输入框,select是下拉选择框,checkbox是复选框
label:属性名对应的名称,也是前端列表所显示的列名
prop:属性名
dicUrl:对应请求后台路径
dicMethod:请求方法类型
props:形成下拉框的数据,显示的名称是label,选中的值是value,可以分别映射后端返回的值
rules:一些验证规则
2.运行结果
3.后台请求初始化下拉列表
4.运行结果
5.默认初始化下拉列表,初始化复选框
直接调用beforeOpen方法,通过this.$set(this.form);来初始化表单
<div class="app-container">
<avue-crud
ref="crud"
:page="page"
:data="tableData"
:permission="permissionList"
:table-loading="tableLoading"
:option="tableOption"
:before-open="beforeOpen"
v-model="form"
@on-load="getPage"
@refresh-change="refreshChange"
@row-update="handleUpdate"
@row-save="handleSave"
@row-del="handleDel"
@sort-change="sortChange"
@search-change="searchChange"
@selection-change="selectionChange"
>
</avue-crud>
</div>
data() {
return {
checkPermi: checkPermi,
form: {},
tableData: [],
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 20, // 每页显示多少条
ascs: [], //升序字段
descs: "create_time", //降序字段
},
paramsSearch: {},
tableLoading: false,
tableOption: tableOption,
dialogAppraises: false,
optionAppraises: {
props: {
avatar: "nickName",
author: "headimgUrl",
body: "content",
},
},
selectionData: "",
pointsConfig: null,
};
},
beforeOpen(done, type) {
if (type == "add") {
done();
} else if (type == "edit") {
this.tableLoading = true;
//根据id查询
getObj(this.form.id).then((response) => {
//初始化复选框
this.form.ensureIds=response.data.ensureIds;
//初始化下拉列表
this.form.shipId=response.data.shipId;
//也可以不发送后端请求,直接赋值表单即可,this.form是page列表的数据
this.$set(this.form);
this.tableLoading = false;
done();
});
}
},