opentiny/tiny-engine

🐛 [Bug]: 添加ElTable和ElTableColumn组件后,在编辑器中ElTableColumn不能选中

Closed this issue · 7 comments

Environment

最新chrome浏览器

Version

latest

Version

latest

Link to minimal reproduction

Step to reproduce

MaterialsComponents:

[
{
    "id": 1,
    "version": "2.4.2",
    "name": {
      "zh_CN": "表格"
    },
    "component": "ElTable",
    "icon": "table",
    "description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作",
    "doc_url": "",
    "screenshot": "",
    "tags": "",
    "keywords": "",
    "dev_mode": "proCode",
    "npm": {
      "package": "element-plus",
      "version": "2.4.2",
      "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
      "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
      "dependencies": null,
      "exportName": "ElTable"
    },
    "group": "数据展示",
    "category": "element-plus",
    "configure": {
      "loop": true,
      "condition": true,
      "styles": true,
      "isContainer": false,
      "isModal": false,
      "isPopper": false,
      "nestingRule": {
        "childWhitelist": ["ElTableColumn"],
        "parentWhitelist": "",
        "descendantBlacklist": "",
        "ancestorWhitelist": ""
      },
      "isNullNode": false,
      "isLayout": false,
      "rootSelector": "",
      "shortcuts": {
        "properties": ["inline", "label-width"]
      },
      "contextMenu": {
        "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"],
        "disable": []
      },
      "invalidity": [""],
      "clickCapture": true,
      "framework": "Vue"
    },
    "schema": {
      "properties": [
        {
          "name": "0",
          "label": {
            "zh_CN": "基础属性"
          },
          "content": [
            {
              "property": "data",
              "label": {
                "text": {
                  "zh_CN": "data"
                }
              },
              "description": {
                "zh_CN": "显示的数据"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "array",
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            },
            {
              "property": "max-height",
              "label": {
                "text": {
                  "zh_CN": "max-height"
                }
              },
              "description": {
                "zh_CN": "Table 的最大高度。"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "number",
              "widget": {
                "component": "MetaNumberic",
                "props": {}
              },
              "device": []
            },
            {
              "property": "height",
              "label": {
                "text": {
                  "zh_CN": "height"
                }
              },
              "description": {
                "zh_CN": "Table 的高度, 默认为自动高度。 这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "string",
              "widget": {
                "component": "MetaInput",
                "props": {}
              },
              "device": []
            },
            {
              "property": "stripe",
              "label": {
                "text": {
                  "zh_CN": "stripe"
                }
              },
              "description": {
                "zh_CN": "是否为斑马纹 table"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "border",
              "label": {
                "text": {
                  "zh_CN": "border"
                }
              },
              "description": {
                "zh_CN": "是否带有纵向边框"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "size",
              "label": {
                "text": {
                  "zh_CN": "size"
                }
              },
              "description": {
                "zh_CN": "Table 的尺寸"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "string",
              "defaultValue": "default",
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "large",
                      "value": "large"
                    },
                    {
                      "label": "default",
                      "value": "default"
                    },
                    {
                      "label": "small",
                      "value": "small"
                    }
                  ]
                }
              }
            },
            {
              "property": "fit",
              "label": {
                "text": {
                  "zh_CN": "fit"
                }
              },
              "description": {
                "zh_CN": "列的宽度是否自撑开"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": true,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "show-header",
              "label": {
                "text": {
                  "zh_CN": "show-header"
                }
              },
              "description": {
                "zh_CN": "是否显示表头"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": true,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "highlight-current-row",
              "label": {
                "text": {
                  "zh_CN": "highlight-current-row"
                }
              },
              "description": {
                "zh_CN": "是否要高亮当前行"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "current-row-key",
              "label": {
                "text": {
                  "zh_CN": "current-row-key"
                }
              },
              "description": {
                "zh_CN": "当前行的 key,只写属性"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "string",
              "widget": {
                "component": "MetaInput",
                "props": {}
              },
              "device": []
            },
            {
              "property": "row-class-name",
              "label": {
                "text": {
                  "zh_CN": "row-class-name"
                }
              },
              "description": {
                "zh_CN": "行的 className"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "widget": {
                "component": "MetaInput",
                "props": {}
              },
              "device": []
            },
            {
              "property": "row-key",
              "label": {
                "text": {
                  "zh_CN": "row-key"
                }
              },
              "description": {
                "zh_CN": "行数据的 Key,用来优化 Table 的渲染; 在使用reserve-selection功能与显示树形数据时,该属性是必填的。 类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              },
              "device": []
            },
            {
              "property": "empty-text",
              "label": {
                "text": {
                  "zh_CN": "empty-text"
                }
              },
              "description": {
                "zh_CN": "空数据时显示的文本内容"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "widget": {
                "component": "MetaInput",
                "props": {}
              },
              "device": []
            },
            {
              "property": "table-layout",
              "label": {
                "text": {
                  "zh_CN": "table-layout"
                }
              },
              "description": {
                "zh_CN": "设置表格单元、行和列的布局方式"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": "fixed",
              "widget": {
                "component": "MetaInput",
                "props": {
                  "options": [
                    {
                      "label": "fixed",
                      "value": "fixed"
                    },
                    {
                      "label": "auto",
                      "value": "auto"
                    }
                  ]
                }
              },
              "device": []
            },
            {
              "property": "scrollbar-always-on",
              "label": {
                "text": {
                  "zh_CN": "scrollbar-always-on"
                }
              },
              "description": {
                "zh_CN": "总是显示滚动条"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "flexible",
              "label": {
                "text": {
                  "zh_CN": "flexible"
                }
              },
              "description": {
                "zh_CN": "确保主轴的最小尺寸,以便不超过内容"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            }
          ],
          "description": {
            "zh_CN": ""
          }
        }
      ],
      "events": {
        "onSelect": {
          "label": {
            "zh_CN": "勾选数据行的 Checkbox 时触发"
          },
          "description": {
            "zh_CN": "当用户手动勾选数据行的 Checkbox 时触发的事件"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "selection",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前选中项"
                }
              },
              {
                "name": "row",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前行"
                }
              }
            ],
            "returns": {}
          }
        },
        "onSelectAll": {
          "label": {
            "zh_CN": "勾选全选时触发"
          },
          "description": {
            "zh_CN": "当用户手动勾选全选 Checkbox 时触发的事件"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "selection",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前选中项"
                }
              }
            ],
            "returns": {}
          }
        },
        "onSelectionChange": {
          "label": {
            "zh_CN": "选择项发生变化时会触发"
          },
          "description": {
            "zh_CN": "当选择项发生变化时会触发该事件"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "selection",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前选中项"
                }
              }
            ],
            "returns": {}
          }
        },
        "onCellMouseEnter": {
          "label": {
            "zh_CN": "单元格 hover 时会触发"
          },
          "description": {
            "zh_CN": "当单元格 hover 进入时会触发该事件"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "row",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前行"
                }
              },
              {
                "name": "column",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前列"
                }
              },
              {
                "name": "cell",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前单元格"
                }
              },
              {
                "name": "event",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "原生事件 event"
                }
              }
            ],
            "returns": {}
          }
        },
        "onCellMouseLeave": {
          "label": {
            "zh_CN": "单元格 hover 退出时会触发"
          },
          "description": {
            "zh_CN": "当单元格 hover 退出时会触发该事件"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "row",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前行"
                }
              },
              {
                "name": "column",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前列"
                }
              },
              {
                "name": "cell",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "当前单元格"
                }
              },
              {
                "name": "event",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "原生事件 event"
                }
              }
            ],
            "returns": {}
          }
        }
      },
      "slots": {
        "empty": {
          "label": {
            "zh_CN": "empty"
          },
          "description": {
            "zh_CN": "当数据为空时自定义的内容"
          }
        },
        "append": {
          "label": {
            "zh_CN": "append"
          },
          "description": {
            "zh_CN": "插入至表格最后一行之后的内容, 如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。 若表格有合计行,该 slot 会位于合计行之上。"
          }
        }
      }
    }
  },
  {
    "id": 1,
    "version": "2.4.2",
    "name": {
      "zh_CN": "表格列"
    },
    "component": "ElTableColumn",
    "icon": "table",
    "description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作",
    "doc_url": "",
    "screenshot": "",
    "tags": "",
    "keywords": "",
    "dev_mode": "proCode",
    "npm": {
      "package": "element-plus",
      "version": "2.4.2",
      "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
      "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
      "dependencies": null,
      "exportName": "ElTableColumn"
    },
    "group": "表单组件",
    "category": "element-plus",
    "configure": {
      "loop": true,
      "condition": true,
      "styles": true,
      "isContainer": false,
      "isModal": false,
      "isPopper": false,
      "nestingRule": {
        "childWhitelist": "",
        "parentWhitelist": "",
        "descendantBlacklist": "",
        "ancestorWhitelist": ""
      },
      "isNullNode": false,
      "isLayout": false,
      "rootSelector": "",
      "shortcuts": {
        "properties": ["inline", "label-width"]
      },
      "contextMenu": {
        "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"],
        "disable": []
      },
      "invalidity": [""],
      "clickCapture": true,
      "framework": "Vue"
    },
    "schema": {
      "properties": [
        {
          "name": "0",
          "label": {
            "zh_CN": "基础属性"
          },
          "content": [
            {
              "property": "type",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "type"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "对应列的类型。 如果设置了selection则显示多选框; 如果设置了 index 则显示该行的索引(从 1 开始计算); 如果设置了 expand 则显示为一个可展开的按钮"
                }
              },
              "defaultValue": "default",
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "default",
                      "value": "default"
                    },
                    {
                      "label": "selection",
                      "value": "selection"
                    },
                    {
                      "label": "index",
                      "value": "index"
                    },
                    {
                      "label": "expand",
                      "value": "expand"
                    }
                  ]
                }
              }
            },
            {
              "property": "index",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "index"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "如果设置了 type=index,可以通过传递 index 属性来自定义索引"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "label",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "label"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "显示的标题"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "column-key",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "column-key"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "column 的 key, column 的 key, 如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "prop",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "prop"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "字段名称 对应列内容的字段名, 也可以使用 property属性"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "width",
              "type": "number",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "width"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "对应列的宽度"
                }
              },
              "widget": {
                "component": "MetaNumberic",
                "props": {}
              }
            },
            {
              "property": "min-width",
              "type": "number",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "min-width"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "对应列的最小宽度, 对应列的最小宽度, 与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列"
                }
              },
              "widget": {
                "component": "MetaNumberic",
                "props": {}
              }
            },
            {
              "property": "fixed",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "fixed"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "列是否固定在左侧或者右侧。 true 表示固定在左侧"
                }
              },
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "left",
                      "value": "left"
                    },
                    {
                      "label": "right",
                      "value": "right"
                    }
                  ]
                }
              }
            },
            {
              "property": "sortable",
              "type": "boolean",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "sortable"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "对应列是否可以排序"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "sort-method",
              "type": "function",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "sort-method"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "指定数据按照哪个属性进行排序,仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "sort-by",
              "type": "array",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "sort-by"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "指定数据按照哪个属性进行排序,仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组,则先按照第 1 个属性排序,如果第 1 个相等,再按照第 2 个排序,以此类推"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            },
            {
              "property": "sort-orders",
              "type": "array",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "sort-orders"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "数据在排序时所使用排序策略的轮转顺序,仅当 sortable 为 true 时有效。 需传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            },
            {
              "property": "resizable",
              "type": "boolean",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "resizable"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "对应列是否可以通过拖动改变宽度(需要在 el-table 上设置 border 属性为真)"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "formatter",
              "type": "function",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "formatter"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "用来格式化内容"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "show-overflow-tooltip",
              "type": "boolean",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "show-overflow-tooltip"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "当内容过长被隐藏时显示 tooltip"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "align",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": "left",
              "label": {
                "text": {
                  "zh_CN": "align"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "对齐方式"
                }
              },
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "left",
                      "value": "left"
                    },
                    {
                      "label": "center",
                      "value": "center"
                    },
                    {
                      "label": "right",
                      "value": "right"
                    }
                  ]
                }
              }
            },
            {
              "property": "header-align",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": "left",
              "label": {
                "text": {
                  "zh_CN": "header-align"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "表头对齐方式, 若不设置该项,则使用表格的对齐方式"
                }
              },
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "left",
                      "value": "left"
                    },
                    {
                      "label": "center",
                      "value": "center"
                    },
                    {
                      "label": "right",
                      "value": "right"
                    }
                  ]
                }
              }
            },
            {
              "property": "class-name",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": "left",
              "label": {
                "text": {
                  "zh_CN": "class-name"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "列的 className"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "label-class-name",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": "left",
              "label": {
                "text": {
                  "zh_CN": "label-class-name"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "当前列标题的自定义类名"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "selectable",
              "type": "function",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "selectable"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "reserve-selection",
              "type": "boolean",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "reserve-selection"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "数据刷新后是否保留选项,仅对  type=selection 的列有效, 请注意, 需指定 row-key 来让这个功能生效。"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "filters",
              "type": "array",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "filters"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "数据刷新后是否保留选项,仅对  type=selection 的列有效, 请注意, 需指定 row-key 来让这个功能生效。"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            },
            {
              "property": "filter-placement",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "filter-placement"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "过滤弹出框的定位"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "filter-multiple",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "filter-multiple"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "数据过滤的选项是否多选"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "filter-method",
              "type": "function",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "filter-method"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "数据过滤使用的方法, 如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "filtered-value",
              "type": "array",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "filtered-value"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            }
          ],
          "description": {
            "zh_CN": ""
          }
        }
      ],
      "events": {},
      "slots": {
        "default": {
          "label": {
            "zh_CN": "自定义列的内容"
          },
          "description": {
            "zh_CN": "自定义列的内容"
          }
        },
        "header": {
          "label": {
            "zh_CN": "自定义表头的内容"
          },
          "description": {
            "zh_CN": "自定义表头的内容"
          }
        }
      }
    }
  },
]

MaterialsSnippets:

[
{
    "group": "Data 数据展示",
    "children": [
      {
        "name": {
          "zh_CN": "表格"
        },
        "icon": "grid",
        "screenshot": "",
        "snippetName": "ElTable",
        "schema": {
          "props": {
            "data": [
              {
                "date": "2016-05-03",
                "name": "Tom",
                "address": "No. 189, Grove St, Los Angeles"
              },
              {
                "date": "2016-05-02",
                "name": "Tom",
                "address": "No. 189, Grove St, Los Angeles"
              },
              {
                "date": "2016-05-04",
                "name": "Tom",
                "address": "No. 189, Grove St, Los Angeles"
              },
              {
                "date": "2016-05-01",
                "name": "Tom",
                "address": "No. 189, Grove St, Los Angeles"
              }
            ]
          },
          "children": [
            {
              "componentName": "ElTableColumn",
              "props": {
                "type": "index"
              }
            },
            {
              "componentName": "ElTableColumn",
              "props": {
                "label": "Date",
                "prop": "date"
              }
            },
            {
              "componentName": "ElTableColumn",
              "props": {
                "label": "Name",
                "prop": "name"
              }
            },
            {
              "componentName": "ElTableColumn",
              "props": {
                "label": "Address",
                "prop": "address"
              }
            },
            {
              "componentName": "ElTableColumn",
              "props": {
                "label": "操作",
                "prop": "action"
              },
              "children": [
                {
                  "componentName": "Template",
                  "props": {
                    "slot": {
                      "name": "default"
                    }
                  },
                  "children": [],
                  "id": "4336e212"
                }
              ]
            }
          ]
        }
      },
    ]
  },
]

当使用上面的配置导入ElTable组件,在编辑器中ElTableColumn不能选中

What is expected

No response

What is actually happening

No response

What is your project name

Any additional comments (optional)

No response

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: After adding ElTable and ElTableColumn components, ElTableColumn cannot be selected in the editor

Environment

Latest chrome browser

Version

latest

Version

latest

Link to minimal reproduction

none

Step to reproduce

MaterialsComponents:

[
{
    "id": 1,
    "version": "2.4.2",
    "name": {
      "zh_CN": "Table"
    },
    "component": "ElTable",
    "icon": "table",
    "description": "Used to display multiple pieces of data with a similar structure. The data can be sorted, filtered, compared or other customized operations",
    "doc_url": "",
    "screenshot": "",
    "tags": "",
    "keywords": "",
    "dev_mode": "proCode",
    "npm": {
      "package": "element-plus",
      "version": "2.4.2",
      "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
      "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
      "dependencies": null,
      "exportName": "ElTable"
    },
    "group": "Data display",
    "category": "element-plus",
    "configure": {
      "loop": true,
      "condition": true,
      "styles": true,
      "isContainer": false,
      "isModal": false,
      "isPopper": false,
      "nestingRule": {
        "childWhitelist": ["ElTableColumn"],
        "parentWhitelist": "",
        "descendantBlacklist": "",
        "ancestorWhitelist": ""
      },
      "isNullNode": false,
      "isLayout": false,
      "rootSelector": "",
      "shortcuts": {
        "properties": ["inline", "label-width"]
      },
      "contextMenu": {
        "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"],
        "disable": []
      },
      "invalidity": [""],
      "clickCapture": true,
      "framework": "Vue"
    },
    "schema": {
      "properties": [
        {
          "name": "0",
          "label": {
            "zh_CN": "Basic attributes"
          },
          "content": [
            {
              "property": "data",
              "label": {
                "text": {
                  "zh_CN": "data"
                }
              },
              "description": {
                "zh_CN": "Displayed data"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "array",
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            },
            {
              "property": "max-height",
              "label": {
                "text": {
                  "zh_CN": "max-height"
                }
              },
              "description": {
                "zh_CN": "The maximum height of Table."
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "number",
              "widget": {
                "component": "MetaNumberic",
                "props": {}
              },
              "device": []
            },
            {
              "property": "height",
              "label": {
                "text": {
                  "zh_CN": "height"
                }
              },
              "description": {
                "zh_CN": "The height of the Table defaults to the automatic height. This height will be set to the value of Table's style.height, and the height of the Table will be controlled by external styles."
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "string",
              "widget": {
                "component": "MetaInput",
                "props": {}
              },
              "device": []
            },
            {
              "property": "stripe",
              "label": {
                "text": {
                  "zh_CN": "stripe"
                }
              },
              "description": {
                "zh_CN": "Whether it is a zebra pattern table"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "border",
              "label": {
                "text": {
                  "zh_CN": "border"
                }
              },
              "description": {
                "zh_CN": "Whether there is a vertical border"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "size",
              "label": {
                "text": {
                  "zh_CN": "size"
                }
              },
              "description": {
                "zh_CN": "Table size"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "string",
              "defaultValue": "default",
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "large",
                      "value": "large"
                    },
                    {
                      "label": "default",
                      "value": "default"
                    },
                    {
                      "label": "small",
                      "value": "small"
                    }
                  ]
                }
              }
            },
            {
              "property": "fit",
              "label": {
                "text": {
                  "zh_CN": "fit"
                }
              },
              "description": {
                "zh_CN": "Whether the width of the column is self-supporting"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": true,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "show-header",
              "label": {
                "text": {
                  "zh_CN": "show-header"
                }
              },
              "description": {
                "zh_CN": "Whether to display the header"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": true,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "highlight-current-row",
              "label": {
                "text": {
                  "zh_CN": "highlight-current-row"
                }
              },
              "description": {
                "zh_CN": "Whether you want to highlight the current line"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "current-row-key",
              "label": {
                "text": {
                  "zh_CN": "current-row-key"
                }
              },
              "description": {
                "zh_CN": "The key of the current row, only write attributes"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "type": "string",
              "widget": {
                "component": "MetaInput",
                "props": {}
              },
              "device": []
            },
            {
              "property": "row-class-name",
              "label": {
                "text": {
                  "zh_CN": "row-class-name"
                }
              },
              "description": {
                "zh_CN": "row's className"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "widget": {
                "component": "MetaInput",
                "props": {}
              },
              "device": []
            },
            {
              "property": "row-key",
              "label": {
                "text": {
                  "zh_CN": "row-key"
                }
              },
              "description": {
                "zh_CN": "Key of row data, used to optimize the rendering of Table; this attribute is required when using the reserve-selection function and displaying tree data. When the type is String, multi-level access is supported: user.info .id, but user.info[0].id is not supported. In this case, please use Function"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              },
              "device": []
            },
            {
              "property": "empty-text",
              "label": {
                "text": {
                  "zh_CN": "empty-text"
                }
              },
              "description": {
                "zh_CN": "Text content displayed when empty data"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "widget": {
                "component": "MetaInput",
                "props": {}
              },
              "device": []
            },
            {
              "property": "table-layout",
              "label": {
                "text": {
                  "zh_CN": "table-layout"
                }
              },
              "description": {
                "zh_CN": "Set the layout of table cells, rows and columns"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": "fixed",
              "widget": {
                "component": "MetaInput",
                "props": {
                  "options": [
                    {
                      "label": "fixed",
                      "value": "fixed"
                    },
                    {
                      "label": "auto",
                      "value": "auto"
                    }
                  ]
                }
              },
              "device": []
            },
            {
              "property": "scrollbar-always-on",
              "label": {
                "text": {
                  "zh_CN": "scrollbar-always-on"
                }
              },
              "description": {
                "zh_CN": "Always show scroll bars"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "flexible",
              "label": {
                "text": {
                  "zh_CN": "flexible"
                }
              },
              "description": {
                "zh_CN": "Ensure the minimum size of the spindle so that the content is not exceeded"
              },
              "required": true,
              "readOnly": false,
              "disabled": false,
              "cols": 12,
              "labelPosition": "top",
              "defaultValue": false,
              "type": "boolean",
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            }
          ],
          "description": {
            "zh_CN": ""
          }
        }
      ],
      "events": {
        "onSelect": {
          "label": {
            "zh_CN": "Triggered when the Checkbox of the data row is checked"
          },
          "description": {
            "zh_CN": "Event triggered when the user manually checks the Checkbox of the data row"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "selection",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Currently selected item"
                }
              },
              {
                "name": "row",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Current line"
                }
              }
            ],
            "returns": {}
          }
        },
        "onSelectAll": {
          "label": {
            "zh_CN": "Trigger when all is selected"
          },
          "description": {
            "zh_CN": "Event triggered when the user manually checks the Select All Checkbox"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "selection",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Currently selected item"
                }
              }
            ],
            "returns": {}
          }
        },
        "onSelectionChange": {
          "label": {
            "zh_CN": "Triggered when the selection changes"
          },
          "description": {
            "zh_CN": "This event will be triggered when the selection changes"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "selection",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Currently selected item"
                }
              }
            ],
            "returns": {}
          }
        },
        "onCellMouseEnter": {
          "label": {
            "zh_CN": "Triggered when cell hovers"
          },
          "description": {
            "zh_CN": "This event will be triggered when the cell hover enters"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "row",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Current line"
                }
              },
              {
                "name": "column",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Current column"
                }
              },
              {
                "name": "cell",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Current cell"
                }
              },
              {
                "name": "event",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Native event event"
                }
              }
            ],
            "returns": {}
          }
        },
        "onCellMouseLeave": {
          "label": {
            "zh_CN": "Triggered when cell hover exits"
          },
          "description": {
            "zh_CN": "This event will be triggered when the cell hover exits"
          },
          "type": "event",
          "functionInfo": {
            "params": [
              {
                "name": "row",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Current line"
                }
              },
              {
                "name": "column",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Current column"
                }
              },
              {
                "name": "cell",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Current cell"
                }
              },
              {
                "name": "event",
                "type": "Object",
                "defaultValue": "",
                "description": {
                  "zh_CN": "Native event event"
                }
              }
            ],
            "returns": {}
          }
        }
      },
      "slots": {
        "empty": {
          "label": {
            "zh_CN": "empty"
          },
          "description": {
            "zh_CN": "Customized content when the data is empty"
          }
        },
        "append": {
          "label": {
            "zh_CN": "append"
          },
          "description": {
            "zh_CN": "Insert content after the last row of the table. If you need to infinitely scroll the content of the table, you may need to use this slot. If the table has a total row, this slot will be located above the total row."
          }
        }
      }
    }
  },
  {
    "id": 1,
    "version": "2.4.2",
    "name": {
      "zh_CN": "Table column"
    },
    "component": "ElTableColumn",
    "icon": "table",
    "description": "Used to display multiple pieces of data with a similar structure. The data can be sorted, filtered, compared or other customized operations",
    "doc_url": "",
    "screenshot": "",
    "tags": "",
    "keywords": "",
    "dev_mode": "proCode",
    "npm": {
      "package": "element-plus",
      "version": "2.4.2",
      "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
      "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
      "dependencies": null,
      "exportName": "ElTableColumn"
    },
    "group": "Form component",
    "category": "element-plus",
    "configure": {
      "loop": true,
      "condition": true,
      "styles": true,
      "isContainer": false,
      "isModal": false,
      "isPopper": false,
      "nestingRule": {
        "childWhitelist": "",
        "parentWhitelist": "",
        "descendantBlacklist": "",
        "ancestorWhitelist": ""
      },
      "isNullNode": false,
      "isLayout": false,
      "rootSelector": "",
      "shortcuts": {
        "properties": ["inline", "label-width"]
      },
      "contextMenu": {
        "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"],
        "disable": []
      },
      "invalidity": [""],
      "clickCapture": true,
      "framework": "Vue"
    },
    "schema": {
      "properties": [
        {
          "name": "0",
          "label": {
            "zh_CN": "Basic attributes"
          },
          "content": [
            {
              "property": "type",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "type"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "The type of the corresponding column. If selection is set, the multi-select box is displayed; if index is set, the index of the row is displayed (calculated from 1); if expand is set, it is displayed as an expandable button"
                }
              },
              "defaultValue": "default",
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "default",
                      "value": "default"
                    },
                    {
                      "label": "selection",
                      "value": "selection"
                    },
                    {
                      "label": "index",
                      "value": "index"
                    },
                    {
                      "label": "expand",
                      "value": "expand"
                    }
                  ]
                }
              }
            },
            {
              "property": "index",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "index"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "If type=index is set, you can customize the index by passing the index attribute"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "label",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "label"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Displayed title"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "column-key",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "column-key"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "The key of column, the key of column. If you need to use the filter-change event, you need this attribute to identify which column the filter condition is."
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "prop",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "prop"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Field name corresponds to the field name of the column content. You can also use the property attribute"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "width",
              "type": "number",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "width"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Width of the corresponding column"
                }
              },
              "widget": {
                "component": "MetaNumberic",
                "props": {}
              }
            },
            {
              "property": "min-width",
              "type": "number",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "min-width"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "The minimum width of the corresponding column, the minimum width of the corresponding column, the difference from width is that width is fixed, min-width will allocate the remaining width proportionally to the column where min-width is set"
                }
              },
              "widget": {
                "component": "MetaNumberic",
                "props": {}
              }
            },
            {
              "property": "fixed",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "fixed"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Whether the column is fixed to the left or right. true means fixed to the left"
                }
              },
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "left",
                      "value": "left"
                    },
                    {
                      "label": "right",
                      "value": "right"
                    }
                  ]
                }
              }
            },
            {
              "property": "sortable",
              "type": "boolean",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "sortable"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Whether the corresponding column can be sorted"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "sort-method",
              "type": "function",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "sort-method"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Specifies which attribute the data is sorted by. It is only valid when sortable is set to true. It should return a Number like Array.sort"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "sort-by",
              "type": "array",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "sort-by"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Specify which attribute the data is sorted by. It is only valid when sortable is set to true and sort-method is not set. If sort-by is an array, it will be sorted according to the first attribute first. If the first is equal , and then sort according to the second one, and so on."
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            },
            {
              "property": "sort-orders",
              "type": "array",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "sort-orders"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "The rotation order of the sorting strategy used when sorting data is only valid when sortable is true. An array needs to be passed in. As the user clicks on the header, the column will be sorted in sequence according to the order of the elements in the array."
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            },
            {
              "property": "resizable",
              "type": "boolean",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "resizable"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Whether the width of the corresponding column can be changed by dragging (the border attribute needs to be set to true on el-table)"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "formatter",
              "type": "function",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "formatter"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Used to format content"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "show-overflow-tooltip",
              "type": "boolean",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "show-overflow-tooltip"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Show tooltip when the content is too long and is hidden"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "align",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": "left",
              "label": {
                "text": {
                  "zh_CN": "align"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Alignment"
                }
              },
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "left",
                      "value": "left"
                    },
                    {
                      "label": "center",
                      "value": "center"
                    },
                    {
                      "label": "right",
                      "value": "right"
                    }
                  ]
                }
              }
            },
            {
              "property": "header-align",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": "left",
              "label": {
                "text": {
                  "zh_CN": "header-align"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Header alignment. If this item is not set, the table alignment will be used."
                }
              },
              "widget": {
                "component": "MetaSelect",
                "props": {
                  "options": [
                    {
                      "label": "left",
                      "value": "left"
                    },
                    {
                      "label": "center",
                      "value": "center"
                    },
                    {
                      "label": "right",
                      "value": "right"
                    }
                  ]
                }
              }
            },
            {
              "property": "class-name",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": "left",
              "label": {
                "text": {
                  "zh_CN": "class-name"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "className of column"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "label-class-name",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": "left",
              "label": {
                "text": {
                  "zh_CN": "label-class-name"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Customized class name of the current column title"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "selectable",
              "type": "function",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "selectable"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Only valid for columns with type=selection, type is Function. The return value of Function is used to determine whether the CheckBox of this row can be checked."
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "reserve-selection",
              "type": "boolean",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "reserve-selection"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Whether to retain the option after data refresh is only valid for columns with type=selection. Please note that row-key needs to be specified for this function to take effect."
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "filters",
              "type": "array",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "filters"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Whether to retain the option after data refresh is only valid for columns with type=selection. Please note that row-key needs to be specified for this function to take effect."
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            },
            {
              "property": "filter-placement",
              "type": "string",
              "labelPosition": "top",
              "label": {
                "text": {
                  "zh_CN": "filter-placement"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Filter pop-up box positioning"
                }
              },
              "widget": {
                "component": "MetaInput",
                "props": {}
              }
            },
            {
              "property": "filter-multiple",
              "type": "string",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "filter-multiple"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "Whether the data filtering options are multi-selectable"
                }
              },
              "widget": {
                "component": "MetaSwitch",
                "props": {}
              }
            },
            {
              "property": "filter-method",
              "type": "function",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "filter-method"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "The method used for data filtering. If it is a multi-select filter item, each piece of data will be executed multiple times. If true is returned at any time, it will be displayed."
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {}
              }
            },
            {
              "property": "filtered-value",
              "type": "array",
              "labelPosition": "top",
              "defaultValue": true,
              "label": {
                "text": {
                  "zh_CN": "filtered-value"
                }
              },
              "description": {
                "text": {
                  "zh_CN": "The selected data filtering item, if you need to customize the rendering method of header filtering, you may need this attribute"
                }
              },
              "widget": {
                "component": "MetaCodeEditor",
                "props": {
                  "language": "json"
                }
              }
            }
          ],
          "description": {
            "zh_CN": ""
          }
        }
      ],
      "events": {},
      "slots": {
        "default": {
          "label": {
            "zh_CN": "Customize column content"
          },
          "description": {
            "zh_CN": "Customize column content"
          }
        },
        "header": {
          "label": {
            "zh_CN": "Customize header content"
          },
          "description": {
            "zh_CN": "Customize header content"
          }
        }
      }
    }
  },
]

MaterialsSnippets:

[
{
    "group": "Data data display",
    "children": [
      {
        "name": {
          "zh_CN": "Table"
        },
        "icon": "grid",
        "screenshot": "",
        "snippetName": "ElTable",
        "schema": {
          "props": {
            "data": [
              {
                "date": "2016-05-03",
                "name": "Tom",
                "address": "No. 189, Grove St, Los Angeles"
              },
              {
                "date": "2016-05-02",
                "name": "Tom",
                "address": "No. 189, Grove St, Los Angeles"
              },
              {
                "date": "2016-05-04",
                "name": "Tom",
                "address": "No. 189, Grove St, Los Angeles"
              },
              {
                "date": "2016-05-01",
                "name": "Tom",
                "address": "No. 189, Grove St, Los Angeles"
              }
            ]
          },
          "children": [
            {
              "componentName": "ElTableColumn",
              "props": {
                "type": "index"
              }
            },
            {
              "componentName": "ElTableColumn",
              "props": {
                "label": "Date",
                "prop": "date"
              }
            },
            {
              "componentName": "ElTableColumn",
              "props": {
                "label": "Name",
                "prop": "name"
              }
            },
            {
              "componentName": "ElTableColumn",
              "props": {
                "label": "Address",
                "prop": "address"
              }
            },
            {
              "componentName": "ElTableColumn",
              "props": {
                "label": "operation",
                "prop": "action"
              },
              "children": [
                {
                  "componentName": "Template",
                  "props": {
                    "slot": {
                      "name": "default"
                    }
                  },
                  "children": [],
                  "id": "4336e212"
                }
              ]
            }
          ]
        }
      },
    ]
  },
]

When using the above configuration to import the ElTable component, the ElTableColumn cannot be selected in the editor.

What is expected

No response

What is actually happening

No response

What is your project name

none

Any additional comments (optional)

No response

麻烦先试一下使用底部路径能不能选到这个元素
image

或者使用大纲树

Bot detected the issue body's language is not English, translate it automatically.


@libinworks

I'm curious, why do the ElTable and ElTableColumn materials provided by the official demo define a columns field for the table that the component does not originally have, and why the definitions of table-column related properties are placed on the table side.

Refer to this method to make an ElSteps and ElStep , it does not work.

@libinworks @zeyongTsai
ElColumns 只是 Element-plus 抽象出来的概念,真实 DOM 并没有真正的 “列”组件,都是行中的每一列组成的。使用 vue-devtools 对比也可以发现无法计算出来具体的位置。所以我们当前的设置 columns 的相关配置,其实是在 ElTable 中进行配置。

image

Bot detected the issue body's language is not English, translate it automatically.


ElColumns is just an abstract concept from Element-plus. The real DOM does not have real "column" components, but is composed of each column in the row. Using vue-devtools for comparison, you can also find that the specific location cannot be calculated. So our current configuration related to setting columns is actually configured in ElTable.