说明： avue-crud组件中添加查询条件或者新增的时候，条件为下拉框且接口在curd组件中配置
1. html代码
<template><basic-container><avue-crud:data="dataList":option="option"@search-change="searchChange"ref="crud"><!-- 按钮 --><template slot-scope="scope" slot="menuLeft"><el-button v-has="'dev-system-add'" type="primary" plain icon="icon-piliangdaochu">导出</el-button><el-buttonv-has="'ent_enterprise_add'"class="filter-item"type="primary"plainicon="el-icon-plus"@click="$refs.crud.rowAdd()">新增</el-button><el-buttonv-has="'sys_enterprise_batch_del'"class="filter-item"type="danger"plainicon="icon-shanchu">批量删除</el-button></template><!-- 自定义列搜索 --><!-- <template slot-scope="{disabled,size}" slot="parentGroupNameSearch"><avue-select v-model="parentGroupName" placeholder="所属分组" :dic="dic"></avue-select></template>--><!-- 弹窗 --><template style="width:100%;" slot="administrationForm" slot-scope="{type,disabled}"><v-region style="width:100%;" type="group" :town="true" v-model="adcData" search></v-region></template><template style="width:100%;" slot="gisAddressForm" slot-scope="scope"><div style="display:flex;line-height:32px;height:32px;"><el-inputstyle="line-height:32px;height:32px;margin-right:10px;"type="text"autocomplete="off"v-model="form.gisAddress":disabled="scope.disabled":readonly="true"/><el-button type="primary" :disabled="scope.disabled">{{form.gisAddress?'重新定位':'定位'}}</el-button></div></template><!-- --><template style="width:100%;" slot-scope="leaderForm" slot="textLabel"><span>联系人 </span><el-tooltip class="item" effect="dark" content="文字提示" placement="top-start"><i class="el-icon-warning"></i></el-tooltip></template><!-- --></avue-crud></basic-container>
</template><script>
import { tableOption } from "@/const/crud/basic/familyOrg";
export default {data() {return {dic: [],adcData: {},form: {},dataList: [{name: "所属分组",project: "111",address: "北京",people: "小明",phone: 123456789,group: 1},{name: "所属分组",project: "111",address: "北京",people: "小明",phone: 123456789,group: 1},{name: "所属分组",project: "111",address: "北京",people: "小明",phone: 123456789,group: 1}],option: tableOption};},methods: {updateHostManufacturerDic(systemCategoryId) {// 内置方法var column = this.findObject(this.option.column, "parentGroupName");// 默认值column.value = "-1";// 参数column.dicQuery = { nodeType: 2 };// URLcolumn.dicUrl = `/org/web/sysOrgTree/orgTree`;// 更新this.$refs.crud.updateDic("parentGroupName");},searchChange(form, done) {console.log("from", form);done();}},mounted() {this.updateHostManufacturerDic();}
};
</script><style lang='scss' scoped>
</style>2. tableOption的配置文件
import { rule } from '@/util/validateRules'
export const tableOption = {addBtn: false,searchMenuSpan: 8,column: [{label: "家庭名称",prop: "name",span: 24,search: true,searchLabel: "",searchLabelWidth: 1,searchPlaceholder: "按家庭名称搜索",rules: [{required: true,message: "请输入家庭名称",trigger: "blur"}]},{label: "所属项目",prop: "projectName",span: 24,rules: [{required: true,message: "请输入所属项目",trigger: "blur"}]},{label: "家庭地址",prop: "address",span: 24,rules: [{required: true,message: "请输入家庭地址",trigger: "blur"}]},{label: "联系人",prop: "leader",span: 24,rules: [{required: true,message: "请输入联系人",trigger: "blur"}]},{label: "联系方式",prop: "leaderPhone",span: 24,rules: [{required: true,message: "请输入联系方式",trigger: "blur"}]},{label: "地图标注",prop: "gisAddress",span: 24,hide: true,rules: [{required: true,message: "请输入地图标注",trigger: "blur"}]},{label: "行政区划",prop: "administration",span: 24,hide: true,rules: [{required: true,message: "请输入行政区划",trigger: "blur"}]},{label: "所属分组",prop: "parentGroupName",span: 24,search: true,type: "select",searchRange: false,searchLabel: "",searchLabelWidth: 1,searchPlaceholder: "所属分组",// 请求方法（默认get）dicMethod:'get',// 下拉框值转换props: {label: 'name',value: 'parentId',// 如果有层级关系需要添加// res:'data.list'},// 验证rules: [{required: true,message: "请输入所属分组",trigger: "blur"}]}]
}
