动态修改字典

<template>
  <section class="CrudDicDemo">
    <oce-crud
      ref="crud"
      :data="tableData"
      :column="tableColumn"
      :group="tableGroup"
      :option="tableOption"
      @update-column-index="updateColumnIndex"
      @form-dialog-submit="formDialogSubmit">
      <template #toolbar-menu-left>
        <el-button @click="updateDic">模拟动态修改字典</el-button>
      </template>
    </oce-crud>
  </section>
</template>

<script>
  let hclx_dic = [
    {
      label: '选项1',
      value: '111',
    },
    {
      label: '选项2',
      value: '222',
    },
    {
      label: '选项3',
      value: '333',
    },
    {
      label: '选项4',
      value: '444',
    },
  ]

  export default {
    name: 'CrudDicDemo',
    data() {
      return {
        tableData: [
          {
            bzbh: '001',
            bzmc: '222',
            hclx: '333',
            hcfx: '444',
            hcbz: '- -',
            hcnr: '- -',
            dzr: '555',
            cjrq: '2023-03-01',
          },
          {
            bzbh: '001',
            bzmc: '222',
            hclx: '333',
            hcfx: '444',
            hcbz: '- -',
            hcnr: '- -',
            dzr: '555',
            cjrq: '2023-03-01',
          },
          {
            bzbh: '001',
            bzmc: '222',
            hclx: '333',
            hcfx: '444',
            hcbz: '- -',
            hcnr: '- -',
            dzr: '555',
            cjrq: '2023-03-01',
          },
        ],
        tableColumn: [
          {
            label: '字段1',
            prop: 'bzbh',
            span: 24,
          },
          {
            label: '字段2',
            prop: 'bzmc',
            span: 24,
          },
          {
            label: '字段3',
            prop: 'hclx',
            search: true,
            type: 'select',
            dicData: hclx_dic,
            span: 24,
          },
          {
            label: '字段4',
            prop: 'hcfx',
            search: true,
            type: 'select',
            span: 24,
          },
          {
            label: '字段5',
            prop: 'hcbz',
            span: 24,
            type: 'textarea',
          },
          {
            label: '字段6',
            prop: 'hcnr',
            span: 24,
            type: 'textarea',
          },
          {
            label: '字段7',
            prop: 'dzr',
            span: 24,
            disabled: true,
          },
          {
            label: '字段8',
            prop: 'cjrq',
            span: 24,
            disabled: true,
          },
        ],
        tableOption: {
          delBtn: false,
          exportBtn: false,
          searchMenuSpan: 8,
          formDialog: {
            show: true,
            width: 500,
          },
        },
      }
    },
    props: {},
    components: {},
    watch: {},
    computed: {},
    methods: {
      // 修改列顺序
      updateColumnIndex({ newIndex, oldIndex }) {
        const currRow = this.tableColumn.splice(oldIndex, 1)[0]
        this.tableColumn.splice(newIndex, 0, currRow)
        this.tableColumn.forEach((el, index) => {
          el.index = index
        })
        this.$refs.crud.refreshTable()
      },
      // 表单提交
      formDialogSubmit({ form, done, loading, type }) {
        done()
      },
      // 模拟动态修改字典，实际开发为接口返回后修改
      updateDic() {
        const mackDic = [
          {
            label: '新-选项1',
            value: '111',
          },
          {
            label: '新-选项2',
            value: '222',
          },
          {
            label: '新-选项3',
            value: '333',
          },
          {
            label: '新-选项4',
            value: '444',
          },
        ]
        // 不能修改引用对象地址！！！
        hclx_dic.length = 0
        mackDic.forEach(el => hclx_dic.push(el))
      }
    },
    created() {},
    mounted() {},
  }
</script>

<style scoped lang="scss">
  .CrudDicDemo {
  }
</style>

Expand Copy Copy