avue中 curd的列表配置

说明： 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-button
          v-has="'ent_enterprise_add'"
          class="filter-item"
          type="primary"
          plain
          icon="el-icon-plus"
          @click="$refs.crud.rowAdd()"
        >新增</el-button>
        <el-button
          v-has="'sys_enterprise_batch_del'"
          class="filter-item"
          type="danger"
          plain
          icon="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-input
            style="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>联系人&nbsp;&nbsp;</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 };
      // URL
      column.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"
                }
            ]
        }
    ]
}