vue 关联表单项组件，常用于组合条件

这是一个 vue 简单组件, 用来实现一个表单关联的功能。例如一些条件生成：

• 当 - 发言人 - 为 - 坐席
• 当 - 发言人 - 为 - 客户
• 当 - 发言内容 - 包含 - 你好
• 当 - 发言内容 - 不包含 - 你好

像上面的上级选项为某个值之后，后面是根据这个值又首先新的选项。

<template>
  <div class="about">
    <span>{{ rootTable.pre }}</span>
    <template v-for="(tableValueItem, tableValueIndex) in filterOptions">
      <el-cascader
        :key="`el-cascader${tableValueIndex}`"
        v-if="[`el-cascader`].includes(getItem(tableValueIndex).type)"
        v-model="tableValue[tableValueIndex]"
        :options="getOptions(tableValueIndex)"
        v-bind="getItem(tableValueIndex).props"
        clearable
      ></el-cascader>
      <el-select
        v-else
        :key="`el-select${tableValueIndex}`"
        clearable
        v-model="tableValue[tableValueIndex]"
        @change="(val) => change(val, tableValueIndex)"
        :placeholder="getItem(tableValueIndex).placeholder"
        :multiple="getItem(tableValueIndex).multiple"
        :allow-create="getItem(tableValueIndex).allowCreate"
        :filterable="getItem(tableValueIndex).allowCreate"
        :default-first-option="getItem(tableValueIndex).allowCreate"
      >
        <el-option
          :key="item.value"
          v-for="item in getOptions(tableValueIndex)"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span :key="`span${tableValueIndex}`">{{ getSub(tableValueIndex) }}</span>
    </template>
  </div>
</template>
<script>
/**
- 只有选择父项目时才会出现子项
- 父项值改变时, 清空子项的值
 */
export default {
  model: {
    prop: "defaultValue",
    event: "update",
  },
  props: {
    // 默认值, 可以用 v-model 绑定
    defaultValue: {
      type: Array,
      default() {
        return ["发言内容发言内容", "包含包含", "关键词关键词", ["你好"]];
      },
    },

    // 标签数据, 可以优化为数据公用表, 然后在 rootTable 中通过 optionsSource 选项引用
    tagData: {
      default() {
        return [
          {
            value: "zhinan",
            sub: `时`,
            label: "指南",
            children: [
              {
                value: "shejiyuanze",
                label: "设计原则",
                children: [
                  {
                    value: "yizhi",
                    label: "一致",
                  },
                  {
                    value: "fankui",
                    label: "反馈",
                  },
                  {
                    value: "xiaolv",
                    label: "效率",
                  },
                  {
                    value: "kekong",
                    label: "可控",
                  },
                ],
              },
              {
                value: "daohang",
                label: "导航",
                children: [
                  {
                    value: "cexiangdaohang",
                    label: "侧向导航",
                  },
                  {
                    value: "dingbudaohang",
                    label: "顶部导航",
                  },
                ],
              },
            ],
          },
          {
            value: "zujian",
            label: "组件",
            children: [
              {
                value: "basic",
                label: "Basic",
                children: [
                  {
                    value: "layout",
                    label: "Layout 布局",
                  },
                  {
                    value: "color",
                    label: "Color 色彩",
                  },
                  {
                    value: "typography",
                    label: "Typography 字体",
                  },
                  {
                    value: "icon",
                    label: "Icon 图标",
                  },
                  {
                    value: "button",
                    label: "Button 按钮",
                  },
                ],
              },
              {
                value: "form",
                label: "Form",
                children: [
                  {
                    value: "radio",
                    label: "Radio 单选框",
                  },
                  {
                    value: "checkbox",
                    label: "Checkbox 多选框",
                  },
                  {
                    value: "input",
                    label: "Input 输入框",
                  },
                  {
                    value: "input-number",
                    label: "InputNumber 计数器",
                  },
                  {
                    value: "select",
                    label: "Select 选择器",
                  },
                  {
                    value: "cascader",
                    label: "Cascader 级联选择器",
                  },
                  {
                    value: "switch",
                    label: "Switch 开关",
                  },
                  {
                    value: "slider",
                    label: "Slider 滑块",
                  },
                  {
                    value: "time-picker",
                    label: "TimePicker 时间选择器",
                  },
                  {
                    value: "date-picker",
                    label: "DatePicker 日期选择器",
                  },
                  {
                    value: "datetime-picker",
                    label: "DateTimePicker 日期时间选择器",
                  },
                  {
                    value: "upload",
                    label: "Upload 上传",
                  },
                  {
                    value: "rate",
                    label: "Rate 评分",
                  },
                  {
                    value: "form",
                    label: "Form 表单",
                  },
                ],
              },
              {
                value: "data",
                label: "Data",
                children: [
                  {
                    value: "table",
                    label: "Table 表格",
                  },
                  {
                    value: "tag",
                    label: "Tag 标签",
                  },
                  {
                    value: "progress",
                    label: "Progress 进度条",
                  },
                  {
                    value: "tree",
                    label: "Tree 树形控件",
                  },
                  {
                    value: "pagination",
                    label: "Pagination 分页",
                  },
                  {
                    value: "badge",
                    label: "Badge 标记",
                  },
                ],
              },
              {
                value: "notice",
                label: "Notice",
                children: [
                  {
                    value: "alert",
                    label: "Alert 警告",
                  },
                  {
                    value: "loading",
                    label: "Loading 加载",
                  },
                  {
                    value: "message",
                    label: "Message 消息提示",
                  },
                  {
                    value: "message-box",
                    label: "MessageBox 弹框",
                  },
                  {
                    value: "notification",
                    label: "Notification 通知",
                  },
                ],
              },
              {
                value: "navigation",
                label: "Navigation",
                children: [
                  {
                    value: "menu",
                    label: "NavMenu 导航菜单",
                  },
                  {
                    value: "tabs",
                    label: "Tabs 标签页",
                  },
                  {
                    value: "breadcrumb",
                    label: "Breadcrumb 面包屑",
                  },
                  {
                    value: "dropdown",
                    label: "Dropdown 下拉菜单",
                  },
                  {
                    value: "steps",
                    label: "Steps 步骤条",
                  },
                ],
              },
              {
                value: "others",
                label: "Others",
                children: [
                  {
                    value: "dialog",
                    label: "Dialog 对话框",
                  },
                  {
                    value: "tooltip",
                    label: "Tooltip 文字提示",
                  },
                  {
                    value: "popover",
                    label: "Popover 弹出框",
                  },
                  {
                    value: "card",
                    label: "Card 卡片",
                  },
                  {
                    value: "carousel",
                    label: "Carousel 走马灯",
                  },
                  {
                    value: "collapse",
                    label: "Collapse 折叠面板",
                  },
                ],
              },
            ],
          },
          {
            value: "ziyuan",
            sub: `时`,
            label: "资源",
            children: [
              {
                value: "axure",
                label: "Axure Components",
              },
              {
                value: "sketch",
                label: "Sketch Templates",
              },
              {
                value: "jiaohu",
                label: "组件交互文档",
              },
            ],
          },
        ];
      },
    },

    /**
      - 渲染表单的数据, 当上一级表单项有值后才会子项
      pre - 在某个表单项前面
      sub - 在某个表单项后面, 当表单项有值后才会显示
      options - 子项的可选项
      type - 可以根据此 type 来渲染组件, 默认为普通 select, 可以优化为动态渲染组件以及添加组件 props 选项
        - el-cascader 级联选择
      label - 选项的 label
      value - 选项的 value
      multiple - 是否多选
      allowCreate - 是否显示清除图片
    */
    rootTable: {
      type: Object,
      default() {
        console.log(`tagDatatagData`, this.tagData);
        return {
          pre: `当`,
          options: [
            {
              label: `发言内容`,
              value: `发言内容发言内容`,
              sub: `中`,
              options: [
                {
                  label: `不包含`,
                  value: `不包含不包含`,
                  sub: ``,
                  options: [
                    {
                      label: `语义标签`,
                      value: `语义标签语义标签`,
                      sub: `中的`,
                      type: `el-cascader`,
                      optionsSource: `tagData`,
                    },
                    {
                      label: `关键词`,
                      value: `关键词关键词`,
                      placeholder: `请输入`,
                      sub: `中的`,
                      multiple: true,
                      allowCreate: true,
                      forcedDisplay: true,
                    },
                  ],
                },
                {
                  label: `包含`,
                  value: `包含包含`,
                  sub: ``,
                  options: [
                    {
                      label: `语义标签`,
                      value: `语义标签语义标签`,
                      sub: `中的`,
                      type: `el-cascader`,
                      optionsSource: `tagData`,
                    },
                    {
                      label: `关键词`,
                      value: `关键词关键词`,
                      placeholder: `请输入`,
                      sub: `中的`,
                      multiple: true,
                      allowCreate: true,
                      forcedDisplay: true,
                    },
                  ],
                },
              ],
            },
            {
              label: `发言人`,
              value: `发言人发言人`,
              sub: `为`,
              options: [
                {
                  label: `用户`,
                  value: `用户用户`,
                  sub: ``,
                  options: [],
                },
                {
                  label: `坐席`,
                  value: `坐席坐席`,
                  sub: ``,
                  options: [],
                },
                {
                  label: `所有`,
                  value: `所有所有`,
                  sub: ``,
                  options: [],
                },
              ],
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      table: this.rootTable.options,
      tableValue: this.defaultValue,
    };
  },
  watch: {
    defaultValue: {
      handler(val) {
        this.$emit(`update:defaultValue`, val);
      },
      deep: true,
    },
  },
  created() {
    // this.getOptions(`选项1选项1`, `选项11选项11`)
  },
  computed: {
    filterOptions() {
      let curItem = this.getCurItem({ index: undefined });
      console.log(`curItemcurItem`, curItem);

      let list = this.tableValue.length ? this.tableValue : [undefined];
      // 如果还有子项并且父选项有值时, 那么就加载子项选择器
      if (
        curItem.forcedDisplay ||
        (this.getOptions().length &&
          [``, undefined].includes(list.slice(-1)[0]) === false)
      ) {
        list.push(undefined);
      }
      return list;
    },
    sub() {
      const curItem =
        this.table.find((item) => item.value === this.tableValue[0]) || {};
      return curItem.sub;
    },
  },
  methods: {
    getCurItem({ keys, index }) {
      if (keys === undefined) {
        keys =
          index === undefined
            ? this.tableValue
            : this.tableValue.slice(0, index);
      }
      let curItem = this.rootTable;
      keys.forEach((key) => {
        curItem =
          (curItem.options || []).find((item) => {
            return (
              item.value === key ||
              (typeof key === `object` ? key.includes(item.value) : false) // 处理多选时如果包含其中一个选项则返回
            );
          }) || {};
      });
      return curItem;
    },
    change(val, index) {
      console.log(`val, key`, val, index);
      this.tableValue.splice(index + 1, this.tableValue.length); // 当父项值改变的时候, 删除所有子项的值
    },
    getOptions(index) {
      // 根据值获取选项
      let curItem = this.getCurItem({ index });
      curItem.options = this[curItem.optionsSource] || curItem.options;
      console.log(`curItem.options`, curItem.options);
      return curItem.options || [];
    },
    getItem(index) {
      let curItem = this.getCurItem({ index });
      return curItem;
    },
    getSub(index) {
      // 根据值获取选项
      if (
        // 只有所选择的项存在值时, 才显示后缀
        this.tableValue[index] === undefined ||
        this.tableValue[index] === ``
      ) {
        return ``;
      }
      const keys = this.tableValue.slice(0, index + 1);
      let curItem = this.getCurItem({ keys });
      console.log(`getSubgetSubgetSubgetSub`, keys, curItem);
      return curItem.sub;
    },
  },
  components: {},
};
</script>

​