不要用json去封装element的表格了，用函数式组件去劫持它吧

2023-09-02 14:07:08

需求分析

系统需要支持本地动态列显隐。
系统需要支持拖拽排序列位置。
系统需要支持固定列。
系统需要支持多个表格同时使用此功能。

解决方案

为了满足这些需求，我们可以使用函数式组件劫持 Element UI 表格。具体步骤如下：

创建一个函数式组件。
在组件中使用 render() 方法渲染表格。
在 render() 方法中，使用 createElement() 方法创建表格的列。
在 createElement() 方法中，使用 props 属性来控制列的显隐、位置和是否固定。

import React from "react";
import { createElement, render } from "react-dom";
import { Table } from "element-ui";

const App = () => {
  const columns = [
    {
      prop: "name",
      label: "姓名",
      width: 100,
    },
    {
      prop: "age",
      label: "年龄",
      width: 100,
    },
    {
      prop: "city",
      label: "城市",
      width: 100,
    },
  ];

  const data = [
    {
      name: "张三",
      age: 20,
      city: "北京",
    },
    {
      name: "李四",
      age: 30,
      city: "上海",
    },
    {
      name: "王五",
      age: 40,
      city: "广州",
    },
  ];

  return (
    <Table
      columns={columns}
      data={data}
      border
      stripe
      style={{ width: "100%" }}
    />
  );
};

render(<App />, document.getElementById("app"));