avue中 curd的列表配置

说明: avue-crud组件中添加查询条件或者新增的时候,条件为下拉框且接口在curd组件中配置

1. html代码


  


  
  
  

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"
                }
            ]
        }
    ]
}

你可能感兴趣的:(vue.js,javascript,前端)