vue\element表格配置化

 formData.js

export default [
  {
    type: "el-input",
    label: "活动名称",
    formKey: "name",
    value: "", // 默认值为空字符串
    options: {
      //   multiple: true,
      vIf: [{ relationKey: "area", value: "area1" }],
    },
  },
  {
    type: "el-input",
    label: "活动名称11",
    formKey: "name1",
    value: "", // 默认值为空字符串
    options: {
      //   multiple: true,
      vIf: [{ relationKey: "area1", value: "area1" }],
    },
  },
  {
    type: "el-select",
    label: "下拉",
    formKey: "area",
    value: "area1", // 默认值为空字符串
    options: {
      //   multiple: true,
    },
    optionData: [
      // 这里模拟去后端拉回数据
      { label: "区域1", value: "area1" },
      { label: "区域2", value: "area2" },
    ],
  },
  {
    type: "el-select",
    label: "活动区域",
    formKey: "area1",
    value: "area1",
    options: {
      multiple: true,
      //   表示当 form.area ==="area1"才显示
      //   vIf: [{ relationKey: "area", value: "area1" }],
    },
    optionData: [
      // 这里模拟去后端拉回数据
      { label: "区域1", value: "area1" },
      { label: "区域2", value: "area2" },
    ],
  },
];

FormItemDemo.vue

<script>
export default {
  name: "FormItemDemo",
  props: {
    config: Array,
    itemConfig: Object, // 接收配置，外部传入
  },
  computed: {
    componetShow() {
      const vIfArr = this.itemConfig?.options.vIf;
      if (!vIfArr) return true;
      const relationArr = this.config.filter((config) =>
        vIfArr.find((vIf) => vIf.relationKey === config.formKey)
      );
      for (const relationItem of relationArr) {
        const vIfItem = vIfArr.find(
          (_) => _.relationKey === relationItem.formKey
        );
        // 这里就是判断 联动的表单值 是否不满足 可以显示 的条件，不满足则不显示
        if (relationItem.value !== vIfItem.value) return false;
      }
      return true;
    },
  },
  render(createElement) {
    if (!this.componetShow) return;
    return createElement(
      "el-form-item",
      {
        props: {
          label: this.itemConfig.label, // 表单项的label
        },
      },
      [
        // 表单组件
        createElement(
          this.itemConfig.type,
          {
            props: {
              value: this.itemConfig.value, // 这里是自己实现一个 v-model
            },
            on: {
              change: (nVal) => {
                // 这里是自己实现一个 v-model
                this.itemConfig.value = nVal;
              },
            },
          },
          this.itemConfig.optionData &&
            this.itemConfig.optionData.map((option) => {
              // 这里只是 本demo 处理 el-select 的 option 数据，实际大家根据具体业务来实现即可
              return createElement("el-option", {
                props: { label: option.label, value: option.value },
              });
            })
        ),
      ]
    );
  },
};
</script>

<template>
  <div class="page m-24">
    <el-form label-width="100px">
      <FormItemDemo
        v-for="(item, index) in dataConfig"
        :config="dataConfig"
        :item-config="item"
        :key="index"
      />
    </el-form>
  </div>
</template>
<script>
// import CustomSelect from "./components/customSelect";

import FormItemDemo from "./FormItemDemo";
import formData from "./formData.js";
export default {
  name: "AddCorpus",
  components: { FormItemDemo },

  data() {
    return {
      dataConfig: formData,
    };
  },
  watch: {},
  computed: {
    uploadCurrent() {
      return "sampleSetId" + "," + this.currentId;
    },
  },

  created() {},
  mounted() {
    console.log(this.dataConfig);
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.imeline-box {
  max-height: 600px;
  overflow-y: scroll;
}
</style>

 掘金看的

前端配置化真香～上班又多了60%的摸🐟时间 - 掘金