avue从vue文件中拆分option

 拆分方式一：

（源vue文件）index.vue

<avue-crud :data="data" :option="option"></avue-crud>
<br>

export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男',
            date:'1994-02-23 00:00:00'
          }, {
            name:'李四',
            sex:'女',
            date:'1994-02-23 00:00:00'
          }, {
            name:'王五',
            sex:'女',
            date:'1994-02-23 00:00:00'
          }, {
            name:'赵六',
            sex:'男',
            date:'1994-02-23 00:00:00'
          }
        ],
        option:{
          title:'表格的标题',
          titleSize:'h3',
          titleStyle:{
            color:'red'
          },
          page:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            },
            {
              label:'性别',
              prop:'sex'
            },{
              label: "日期",
              prop: "date",
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
            }
          ]
        }
      }
    }
  }

拆分成一个vue文件一个是js文件

index1.vue

<avue-crud :data="data" :option="option"></avue-crud>
<br>

import option from '@/option/water/common/busifeecfg'
export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男',
            date:'1994-02-23 00:00:00'
          }, {
            name:'李四',
            sex:'女',
            date:'1994-02-23 00:00:00'
          }, {
            name:'王五',
            sex:'女',
            date:'1994-02-23 00:00:00'
          }, {
            name:'赵六',
            sex:'男',
            date:'1994-02-23 00:00:00'
          }
        ],
        option
      }
    }
  }

index1.js 

export default {
  title:'表格的标题',
  titleSize:'h3',
  titleStyle:{
    color:'red'
  },
  page:false,
  align:'center',
  menuAlign:'center',
  column:[
      {
      label:'姓名',
      prop:'name'
    },
    {
      label:'性别',
      prop:'sex'
    },{
      label: "日期",
      prop: "date",
      type: "date",
      format: "yyyy-MM-dd hh:mm:ss",
      valueFormat: "yyyy-MM-dd hh:mm:ss",
    }
  ]
}

拆分方式二： 

option中有带事件的源vue文件

index.vue

<avue-crud :data="data" :option="option"></avue-crud>
<br>

export default {
 data() {
      return {
        option:{
          title:'表格的标题',
          titleSize:'h3',
          titleStyle:{
            color:'red'
          },
          page:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name',
              change: ({value,column}) => {
              this.$message.success('查看控制台')
              console.log('值改变',value,column)
            }

            },
            {
              label:'性别',
              prop:'sex'
            },{
              label: "日期",
              prop: "date",
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
            }
          ]
        }
      }
    }
  }

拆分文件：

index2.vue

<avue-crud :data="data" :option="option"></avue-crud>
<avue-crud :data="data" :option="option1"></avue-crud>
<br>

export default {
 data() {
      return {
        option: boxOption(this.show, this.startboxChange, this.newboxChange, this.deptIdChange),
        option1: inLibraryOption,

      }
    }
  }

index2.js

import website from '@/config/website'
export function boxOption(show, startboxChange, newboxChange, deptIdChange) {
  return {
    height: show ? "auto" : "450",
    calcHeight: 30,
    menu: show,
    addBtn: show,
    tip: false,
    searchShow: true,
    searchMenuSpan: 6,
    addBtnText: "新箱建档",
    addTitle: "新箱建档",
    border: true,
    index: true,
    viewBtn: true,
    selection: show,
    dialogClickModal: false,
    labelWidth: 110,
    column: [
      {
      label: "所属租户",
      prop: "tenantId",
      type: "tree",
      dicUrl: "/api/blade-system/tenant/select",
      // addDisplay: false,
      // editDisplay: false,
      viewDisplay: website.tenantMode,
      span: 12,
      props: {
        label: "tenantName",
        value: "tenantId"
      },
      hide: !website.tenantMode,
      search: website.tenantMode,
      rules: [{
        required: true,
        message: "请输入所属租户",
        trigger: "click"
      }]
    },  
      {
        label: "管理单位",
        prop: "deptId",
        dicUrl: "/api/blade-system/dept/getTree?deptCategory=1",
        type: "tree",
        search: show,
        overHidden: true,
        span: 8,
        props: {
          label: "title",
          value: "id"
        },
        rules: [
          {
            required: true,
            message: "请选择所属单位",
            trigger: ["blur", "change"]
          }
        ],
        change: deptIdChange
      },
      {
        label: "库房名称",
        prop: "whName",
        overHidden: true,
        span: 16,
        addDisplay: false,
        editDisplay: false
      },
      {
        label: "库房名称",
        prop: "whId",
        search: show,
        hide: true,
        viewDisplay: false,
        span: 16,
        searchSpan: 12,
        searchslot: true,
        formslot: true,
        rules: [
          {
            required: true,
            message: "请选择库房",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "表箱编号",
        prop: "boxNo",
        type: "number",
        controls: false,
        addDisplay: false,
        search: true,
        span: 8,
        rules: [
          {
            required: true,
            message: "请输入表箱编号",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "起始表箱编号",
        prop: "boxNoStart",
        type: "number",
        span: 8,
        editDisplay: false,
        viewDisplay: false,
        controls: false,
        hide: true,
        rules: [
          {
            required: true,
            message: "请输入起始表箱编号",
            trigger: ["blur", "change"]
          }
        ],
        change: ({ value }) => startboxChange(value)
      },
      {
        label: "新增表箱数",
        prop: "boxNum",
        type: "number",
        value: 1,
        minRows: 1,
        precision: 0,
        span: 8,
        hide: true,
        editDisplay: false,
        viewDisplay: false,
        rules: [
          {
            required: true,
            message: "请输入新增表箱数",
            trigger: ["blur", "change"]
          }
        ],
        change: ({ value }) => newboxChange(value)
      },
      {
        label: "截至表箱编号",
        prop: "boxNoEnd",
        type: "number",
        controls: false,
        disabled: true,
        span: 8,
        hide: true,
        editDisplay: false,
        viewDisplay: false,
        rules: [
          {
            required: true,
            message: "请输入截至表箱编号",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "水表户型",
        prop: "meterLayout",
        search: true,
        type: "select",
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=meter_layout",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
        span: 8,
        rules: [
          {
            required: true,
            message: "请选择水表户型",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "水表方向",
        prop: "meterDirect",
        search: true,
        type: "select",
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=meter_direct",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
        span: 8,
        rules: [
          {
            required: true,
            message: "请选择水表方向",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "生产厂家",
        prop: "manufacturer",
        search: true,
        overHidden: true,
        type: "select",
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_manufacturer",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
        span: 8,
        rules: [
          {
            required: true,
            message: "请选择生产厂家",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "型号",
        prop: "boxModel",
        type: "select",
        search: true,
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_model",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
        span: 8,
        rules: [
          {
            required: true,
            message: "请选择型号",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "材质",
        prop: "material",
        type: "select",
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_material",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
        span: 8,
        rules: [
          {
            required: true,
            message: "请选择材质",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "出厂日期",
        prop: "leavefactDate",
        width: 100,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
        span: 8,
        rules: [
          {
            required: true,
            message: "请选择出厂日期",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "状态",
        prop: "boxStatus",
        search: true,
        type: "select",
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_status",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
        span: 8,
        rules: [
          {
            required: true,
            message: "请选择状态",
            trigger: ["blur", "change"]
          }
        ]
      },
      {
        label: "出厂日期",
        prop: "searchDate",
        type: "date",
        searchRange: true,
        search: true,
        slot: true,
        display: false,
        hide: true,
        searchSpan: 8,
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd"
      },
      {
        label: "备注",
        prop: "remarks",
        hide: true,
        type: "textarea",
        span: 16,
        minRows: 3
      }
    ]
  };
}

export const inLibraryOption = {
  emptyBtn: false,
  submitBtn: true,
  menuPosition: "right",
  column: [
    {
      label: "出入库类别",
      prop: "dioType",
      value: "01",
      display: false,
      type: "select",
      dicUrl: "/api/blade-system/dict-biz/dictionary?code=dio_type",
      props: {
        label: "dictValue",
        value: "dictKey"
      }
    },
    {
      label: "入库类型",
      prop: "dinType",
      span: 24,
      type: "radio",
      dicUrl: "/api/blade-system/dict-biz/dictionary?code=din_type",
      props: {
        label: "dictValue",
        value: "dictKey"
      },
      rules: [
        {
          required: true,
          message: "请选择入库类型",
          trigger: ["blur", "change"]
        }
      ]
    },
    {
      label: "库房名称",
      prop: "whId",
      formslot: true,
      rules: [
        {
          required: true,
          message: "请选择库房",
          trigger: ["blur", "change"]
        }
      ]
    },
    {
      label: "入库说明",
      prop: "remarks",
      type: "textarea",
      span: 24,
      rules: [
        {
          required: true,
          message: "请输入入库说明",
          trigger: ["blur", "change"]
        }
      ]
    }
  ]
};