基于Elemnet-plus 封装的功能表格，基本囊括element-plus 官网表格的所有使用场景

已于 2023-12-30 11:12:15 修改
阅读量1.7k 收藏 23
点赞数 18
分类专栏： element-plus 组件封装 文章标签： vue.js javascript ecmascript element-plus 组件封装
于 2023-12-28 00:19:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44832362/article/details/135210910
版权

 前言

        这是一个多用途的基于element-plus 封装的表格组件，基本上elemnet-plus 官网涉及到的使用场景，都可以，而且使用上来说会简单许多，配置上类似与vxe-table 的使用，下面逐一展示各种场景的使用方式，基本上与el-table 使用方式类似，上手成本低, 需要完整代码的帅哥美女们，可以评论留言或者私聊我。

一、为什么封装？

        在我门公司的项目中，遇到很多地方会使用到表格，而我们使用的是element-plus 官方的表格组件，各个地方使用的都会多少有点差异，比如有的表格需要border, 有的地方不需要border,有的地方需要多选批量操作】有的地方需要斑马线等等，所以这里统一封装了一下，基本可以兼容上述所有使用场景，且使用，大部分与原elemnet-plus 类似，也有参考vxe-table的使用方式，下面开始逐一介绍各种使用场景，表格组件封装的源码，会放到最后。

二、使用场景

1.基础表格使用

 1.1、效果

        1.2、使用方式 

配置表格有哪些列

const columns = [
  {
    label: "Date",
    prop: "date",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Address",
    prop: "address",
  },
];

表格数据

const tableData = [
  {
    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",
  },
];

 表格组件组使用的地方（当然记得在使用我们表格组件的时候 import 引入一下）

<MxeTableVue :data="tableData" :columns="columns" @getList="getList" />

注意：getList 是在实际使用的时候，需要调用后端接口请求表格数据时用到的，这里没用到可以不写，接下来的表格中也是如此 

2.带斑马线表格

2.1、效果

2.2、使用方式 

其实只需要更改一下，使用表格的地方的代码即可

<MxeTableVue
   :data="tableData"
   :columns="columns"
   stripe
   @getList="getList"
/>

这样使用是不是就和 我们使用el-table 的时候，配置一样 stripe 属性直接放到组件上面即可

3.带边框表格

3.1、效果

列配置与数据跟基础表格一致

3.2、使用方式 

  <MxeTableVue
    :data="tableData"
     :columns="columns"
     border
     @getList="getList"
  />

 这样使用是不是就和 我们使用el-table 的时候，配置一样 stripe 属性直接放到组件上面即可

4.带状态表格

4.1、效果

4.2、使用方式

在项目的主css文件中添加你想要的状态样式，我是直接拿element-plus 官网的来做例子的，也可以自己定义

 表格组件使用的地方

<MxeTableVue
  :data="tableData"
  :columns="columns"
  :row-class-name="tableRowClassName"
  @getList="getList"
/>

script 下增加

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === 1) {
    return "warning-row";
  } else if (rowIndex === 3) {
    return "success-row";
  }
  return "";
};

5.多级表头

5.1、效果

5.2、使用方式

 使用表格组件的地方

 <MxeTableVue :data="tableData" :columns="columns" @getList="getList" />

列配置

const columns = [
  {
    label: "Date",
    prop: "date",
  },
  {
    label: "Delivery Info",
    children: [
      {
        label: "Name",
        prop: "name",
      },
      {
        label: "Address Info",
        children: [
          {
            label: "State",
            prop: "state",
          },
          {
            label: "City",
            prop: "city",
          },
          {
            label: "Address",
            prop: "address",
          },
          {
            label: "Zip",
            prop: "zip",
          },
        ],
      },
    ],
  },
];

tableData 数据

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
];

6.单选表格

6.1、效果

6.2、使用方式

 表格使用的地方

   <MxeTableVue
      :data="tableData"
      :columns="columns"
      highlight-current-row
      @current-change="handleCurrentChange"
    />

列定义

const columns = [
  {
    type: "index",
    label: "序号",
    width: 80,
  },
  {
    label: "Date",
    prop: "date",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Address",
    prop: "address",
  },
];

 表格数据

const tableData = [
  {
    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",
  },
];

需要在需要增加一个 handleCurrentChange 当点击表格行时触发，这里主要是显示点击行数据，具体要做啥逻辑得根据自己业务来细化

const handleCurrentChange = (val) => {
  // 获取当前行数据
  console.log(val);
};

7.多选表格

7.1、效果

7.2、使用方式

 表格使用的地方

   <MxeTableVue
      :data="tableData"
      :columns="columns"
      @selection-change="handleSelectionChange"
    />

列定义

const columns = [
  {
    type: "selection",
    label: "序号",
    width: 80,
  },
  {
    label: "Date",
    prop: "date",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Address",
    prop: "address",
  },
];

 表格数据

const tableData = [
  {
    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",
  },
];

需要在需要增加一个 handleCurrentChange 当点击表格行时触发，这里主要是显示点击行数据，具体要做啥逻辑得根据自己业务来细化

const handleSelectionChange = (val) => {
  console.log(val);
};

8.带筛选表格

8.1、效果

8.2、使用方式

 表格使用的地方

<MxeTableVue
  :data="tableData"
  :columns="columns"
>
  <template #tag="scope">
    <el-tag
      :type="scope.row.tag === 'Home' ? '' : 'success'"
       disable-transitions
    >{{ scope.row.tag }}</el-tag>
  </template>
</MxeTableVue>

列配置


const columns = [
  {
    label: "Date",
    prop: "date",
    columnKey: "date",
    // 排序
    sortable: true,
    // 供筛选的内容，可以根据实际需要配置
    filters: [
      { text: "2016-05-01", value: "2016-05-01" },
      { text: "2016-05-02", value: "2016-05-02" },
      { text: "2016-05-03", value: "2016-05-03" },
      { text: "2016-05-04", value: "2016-05-04" },
    ],
    filterMethod: (value, row, column) => {
      const property = column["property"];
      return row[property] === value;
    },
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Address",
    prop: "address",
    // 使用插槽自定义列内容
    slots: {
      default: "tag",
    },
    filters: [
      { text: "Home", value: "Home" },
      { text: "Office", value: "Office" },
    ],
    filterMethod: (value, row) => {
      return row.tag === value;
    },
    // 控制筛选框出现的位置
    filterPlacement: "bottom-end",
  },
];

 tableData 数据

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    tag: "Home",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    tag: "Office",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    tag: "Home",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    tag: "Office",
  },
];

9.带展开行的表格

 9.1、效果

 9.2、使用方式

表格使用的地方

<MxeTableVue :data="tableData" :columns="columns">
      <template #expand="scope">
        <div m="4">
          <p m="t-0 b-2">State: {{ scope.row.state }}</p>
          <p m="t-0 b-2">City: {{ scope.row.city }}</p>
          <p m="t-0 b-2">Address: {{ scope.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ scope.row.zip }}</p>
          <h3>Family</h3>
          <el-table :data="scope.row.family">
            <el-table-column label="Name" prop="name" />
            <el-table-column label="State" prop="state" />
            <el-table-column label="City" prop="city" />
            <el-table-column label="Address" prop="address" />
            <el-table-column label="Zip" prop="zip" />
          </el-table>
        </div>
      </template>
    </MxeTableVue>

列配置

const columns = [
  {
    type: "expand",
    width: 50,
    slots: {
      default: "expand",
    },
  },
  {
    label: "Date",
    prop: "date",
  },
  {
    label: "Name",
    prop: "name",
  },
];

tableData 数据 

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "San Francisco",
    address: "3650 21st St, San Francisco",
    zip: "CA 94114",
    family: [
      {
        name: "Jerry",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Spike",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Tyke",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
    ],
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "San Francisco",
    address: "3650 21st St, San Francisco",
    zip: "CA 94114",
    family: [
      {
        name: "Jerry",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Spike",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Tyke",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
    ],
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "San Francisco",
    address: "3650 21st St, San Francisco",
    zip: "CA 94114",
    family: [
      {
        name: "Jerry",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Spike",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Tyke",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
    ],
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "San Francisco",
    address: "3650 21st St, San Francisco",
    zip: "CA 94114",
    family: [
      {
        name: "Jerry",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Spike",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Tyke",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
    ],
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "San Francisco",
    address: "3650 21st St, San Francisco",
    zip: "CA 94114",
    family: [
      {
        name: "Jerry",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Spike",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Tyke",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
    ],
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "San Francisco",
    address: "3650 21st St, San Francisco",
    zip: "CA 94114",
    family: [
      {
        name: "Jerry",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Spike",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Tyke",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
    ],
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "San Francisco",
    address: "3650 21st St, San Francisco",
    zip: "CA 94114",
    family: [
      {
        name: "Jerry",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Spike",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
      {
        name: "Tyke",
        state: "California",
        city: "San Francisco",
        address: "3650 21st St, San Francisco",
        zip: "CA 94114",
      },
    ],
  },
];

10.自定义表头表格

10.1、效果

10.2、使用方式

使用表格的地方

<MxeTableVue :data="tableData" :columns="columns">
      <template #opera-header="scope">
        <el-input size="small" placeholder="Type to search" />
      </template>
      <template #opera>
        <el-button size="small">Edit</el-button>
        <el-button size="small" type="danger">Delete</el-button>
      </template>
    </MxeTableVue>

列配置


const columns = [
  {
    label: "Date",
    prop: "date",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    slots: {
      header: "opera-header",
      default: "opera",
    },
  },
];

tableData 数据

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "John",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Morgan",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Jessy",
    address: "No. 189, Grove St, Los Angeles",
  },
];

11、树形数据表格

 11.1、效果

11.2、使用方式

表格使用的地方

<MxeTableVue
      :data="tableData"
      :columns="columns"
      row-key="id"
      border
      default-expand-all
    />

列配置

const columns = [
  {
    label: "Date",
    prop: "date",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Address",
    prop: "address",
  },
];

tableData 数据（属性表格，就是根据数据具有 children 展示的）

const tableData = [
  {
    id: 1,
    date: "2016-05-02",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
    children: [
      {
        id: 2,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
        children: [
          {
            id: 3,
            date: "2016-05-01",
            name: "wangxiaohu",
            address: "No. 189, Grove St, Los Angeles",
          },
          {
            id: 4,
            date: "2016-05-01",
            name: "wangxiaohu",
            address: "No. 189, Grove St, Los Angeles",
          },
        ],
      },
      {
        id: 5,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
        children: [
          {
            id: 6,
            date: "2016-05-01",
            name: "wangxiaohu",
            address: "No. 189, Grove St, Los Angeles",
          },
          {
            id: 7,
            date: "2016-05-01",
            name: "wangxiaohu",
            address: "No. 189, Grove St, Los Angeles",
          },
        ],
      },
    ],
  },
  {
    id: 8,
    date: "2016-05-04",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
    children: [
      {
        id: 9,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        id: 10,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
      },
    ],
  },
  {
    id: 11,
    date: "2016-05-01",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
    children: [
      {
        id: 12,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        id: 13,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
      },
    ],
  },
];

12.懒加载表格

 12.1、效果

  12.2、使用方式

表格使用的地方

<MxeTableVue
      :data="tableData"
      :columns="columns"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    />

列配置

const columns = [
  {
    label: "Date",
    prop: "date",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Address",
    prop: "address",
  },
];

 tableData 数据

const tableData = [
  {
    id: 1,
    date: "2016-05-02",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "wangxiaohu",
    hasChildren: true,
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "wangxiaohu",
    address: "No. 189, Grove St, Los Angeles",
  },
];

load 方法

const load = (row, treeNode, resolve) => {
  // 模拟请求后端数据 
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        id: 32,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles",
      },
    ]);
  }, 1000);
};

13、表格显示尾合计行

13.1、效果

13.2、使用方式

表格使用的地方

<MxeTableVue :data="tableData" :columns="columns" show-summary />

列配置

const columns = [
  {
    label: "ID",
    prop: "id",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Amount 1",
    prop: "amount1",
    sortable: true,
  },
  {
    label: "Amount 2",
    prop: "amount2",
    sortable: true,
  },
  {
    label: "Amount 3",
    prop: "amount3",
    sortable: true,
  },
];

tableData 数据

const tableData = [
  {
    id: "12987122",
    name: "Tom",
    amount1: "234",
    amount2: "3.2",
    amount3: 10,
  },
  {
    id: "12987123",
    name: "Tom",
    amount1: "165",
    amount2: "4.43",
    amount3: 12,
  },
  {
    id: "12987124",
    name: "Tom",
    amount1: "324",
    amount2: "1.9",
    amount3: 9,
  },
  {
    id: "12987125",
    name: "Tom",
    amount1: "621",
    amount2: "2.2",
    amount3: 17,
  },
  {
    id: "12987126",
    name: "Tom",
    amount1: "539",
    amount2: "4.1",
    amount3: 15,
  },
];

 14.合并行列的表格

  14.1、效果

14.2、使用方式

表格使用的地方

<MxeTableVue
      :data="tableData"
      :columns="columns"
      :span-method="arraySpanMethod"
      border
    />

列配置

const columns = [
  {
    label: "ID",
    prop: "id",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Amount 1",
    prop: "amount1",
  },
  {
    label: "Amount 2",
    prop: "amount2",
  },
  {
    label: "Amount 3",
    prop: "amount3",
  },
];

 tableData 表格数据

const tableData = [
  {
    id: "12987122",
    name: "Tom",
    amount1: "234",
    amount2: "3.2",
    amount3: 10,
  },
  {
    id: "12987123",
    name: "Tom",
    amount1: "165",
    amount2: "4.43",
    amount3: 12,
  },
  {
    id: "12987124",
    name: "Tom",
    amount1: "324",
    amount2: "1.9",
    amount3: 9,
  },
  {
    id: "12987125",
    name: "Tom",
    amount1: "621",
    amount2: "2.2",
    amount3: 17,
  },
  {
    id: "12987126",
    name: "Tom",
    amount1: "539",
    amount2: "4.1",
    amount3: 15,
  },
];

 15、带分页的表格

 15.1、效果

 15.2、使用方式

表格使用的地方

// 注意这里total 要根据实际数据来，这里写死800只是为了展示而已
<MxeTableVue
      :data="tableData"
      :columns="columns"
      v-model:pageIndex="page.pageIndex"
      v-model:pageSize="page.pageSize"
      :total="800"
      @getList="getList"
    />

 列配置

const columns = [
  {
    label: "ID",
    prop: "id",
  },
  {
    label: "Name",
    prop: "name",
  },
  {
    label: "Amount 1",
    prop: "amount1",
  },
  {
    label: "Amount 2",
    prop: "amount2",
  },
  {
    label: "Amount 3",
    prop: "amount3",
  },
];

tableData 表格数据

const tableData = [
  {
    id: "12987122",
    name: "Tom",
    amount1: "234",
    amount2: "3.2",
    amount3: 10,
  },
  {
    id: "12987123",
    name: "Tom",
    amount1: "165",
    amount2: "4.43",
    amount3: 12,
  },
  {
    id: "12987124",
    name: "Tom",
    amount1: "324",
    amount2: "1.9",
    amount3: 9,
  },
  {
    id: "12987125",
    name: "Tom",
    amount1: "621",
    amount2: "2.2",
    amount3: 17,
  },
  {
    id: "12987126",
    name: "Tom",
    amount1: "539",
    amount2: "4.1",
    amount3: 15,
  },
];

 16、表格使用总结

封装的这个表格，基本可以覆盖 element-plus 官网，所有表格使用demo, 所有可以放到 el-table 的属性方法都可以放到 MxeTableVue 组件上，所有可以放到 el-column 的属性， 都可以放到列表配置中的每个对象上。

 

三、表格源码

mxe-table.vue组件 （解释上面使用的时候是 MxeTableVue 加了个Vue后缀是因为，项目组要求与普通Html做区分，所以在引入组件的时候是这样引入的 import MxeTableVue  from 'xx/xxx/xx'）

<script setup>
import { ref, computed } from "vue";
import MxeTableColumn from "./mxe-table-column.vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  pageIndex: {
    type: Number,
  },
  pageSize: {
    type: Number,
  },
  total: {
    type: Number,
  },
});

const emits = defineEmits(["update:pageIndex", "update:pageSize", "getList"]);

const page = ref({
  pageIndex: computed({
    get: () => props.pageIndex,
    set(pageIndex) {
      emits("update:pageIndex", pageIndex);
    },
  }),
  pageSize: computed({
    get: () => props.pageSize,
    set(pageSize) {
      emits("update:pageSize", pageSize);
    },
  }),
});

const handleSizeChange = () => {
  page.value.pageIndex = 1;
  emits("getList");
};
</script>

<template>
  <!-- v-bind="$attrs" 将不被props接收的参数都绑定到 el-table -->
  <div class="table-and-pager">
    <div class="table-box">
      <el-table :data="data" style="width: 100%; height: 100%" v-bind="$attrs">
        <MxeTableColumn :columns="columns">
          <!-- 插槽透传, 不然, 如果是多级表头, 里层接收不到 -->
          <!-- $slots 是所有传进来的插槽的信息 -->
          <template
            v-for="name in Object.keys($slots)"
            :key="name"
            #[name]="scope"
          >
            <slot :name="name" v-bind="scope" />
          </template>
        </MxeTableColumn>
        <template #empty>
          <!-- 给一个空组件 -->
          <div>空空如也{{ $slots }}</div>
        </template>
      </el-table>
    </div>
    <div class="pager-box" v-if="props.pageIndex && props.pageSize">
      <el-pagination
        v-model:current-page="page.pageIndex"
        v-model:page-size="page.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="emits('getList')"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.table-and-pager {
  width: 100%;
  height: 100%;
  .table-box {
    width: 100%;
    height: calc(100% - 50px);
    // 当有表位有合计行时, 改变其背景颜色, 使用与表格主体颜色统一一点
    :deep(.el-table tfoot td.el-table__cell) {
      background: #fff;
    }
  }
  .pager-box {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>

mxe-table-column.vue

<script setup>
import { omit } from "lodash-es";

const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
});
</script>

<template>
  <el-table-column
    v-for="column in columns"
    v-bind="omit(column, ['children'])"
  >
    <template #default="scope">
      <slot
        v-if="column?.slots?.default && !column.children?.length"
        :name="column.slots.default"
        v-bind="scope"
      />
      <template v-else-if="column.children?.length">
        <!-- 递归调用, .vue文件名 是非index的，可以直接使用文件名调用自己 -->
        <MxeTableColumn :columns="column.children">
          <template
            v-for="name in Object.keys($slots)"
            :key="name"
            #[name]="scope"
          >
            <slot :name="name" v-bind="scope" />
          </template>
        </MxeTableColumn>
      </template>
    </template>

    <template #header="scope">
      <slot
        v-if="column?.slots?.header"
        :name="column.slots.header"
        v-bind="scope"
      />
    </template>
  </el-table-column>
</template>

<style scoped></style>

四、总结

        好了，这就是基本所有内容了，欢迎各位大佬批评指正，讨论交流，如能对此提出更好的优化意见就再好不过了，后续有时间，也会结合项目实践，继续优化，扩展。

ZL随心
关注
  • 18
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element-plus el-table表格组件封装记录
weixin_64160020的博客
03-01 2022
昨天初步体验了一把form表单的封装,觉得还是有些浅显且有些地方没有理清,所以今天来试一试B端项目中同样常用的一个组件---el-table的二次封装,1.和el-form组件一样通过传入对象的形式对table表格进行条件渲染2.能够在实际调用场景下通过插槽来自定义标题,提交按钮等一些小东西3.能够通过v-bind绑定属性实现开关组件,编辑/删除,多选框等操作按钮的显示。
element plus table封装
小陈的博客
03-16 1687
在table数据请求的过程 过于频繁，从而导致页面代码多，封装的目的就是减少相同代码，提高在开发中的效率整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
vue3 + element-plus 表格封装
www12312312的博客
03-19 402
【代码】vue3 + element-plus 表格封装。
element-plus-admin：基于Vue 3和ElementPlus的管理样板
02-26
元素加管理员 基于Vue 3和ElementPlus的管理样板。 :clapper_board: 预览 :construction: 状态 工作正在进行中 :red_apple: 尝试 $ git clone https://github.com/ntnyq/element-plus-admin.git $ cd element-plus-admin $ npm install pnpm -g $ pnpm install $ pnpm run serve
Vue3 + Element-plus + TS —— 动态表格自由编辑
最新发布
技术前端，忠于热爱 @0.活在风浪里
06-20 1203
可编辑的 Vue2 、3的表格，自由编辑！
Element Plus 封装表格组件、表格查询、表格分页、动态表头，可编辑单元格【常用功能版本】
m0_67584973的博客
06-16 6378
Element Plus 封装表格、可编辑单元格、表格查询、表格分页、动态表头组件
Vue3 + Element Plus 封装公共表格组件（带源码）
Yana's Blog
05-06 8770
由于项目中有很多菜单都是列表数据的展示，为避免太多重复代码，故将 Element Plus 的 Table 表格进行封装，实现通过配置展示列表数据el-table-column 使用自定义表头支持插槽labelStyle 支持样式自定义支持 tooltipel-table-column 使用自定义单元格支持插槽style 属性支持自定义样式formatter 方法支持自定义显示内容
Element Plus el-table表格查询封装
m0_67584973的博客
03-30 1592
Element plus 封装表格增删改查。
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ak-design可视化低代码快速开发平台，使用基于vue3.x桌面端组件库 Elemnet-Plus，通过可视化的.zip
03-06
Element Plus是基于Vue 2.x的Element UI的升级版，它在Vue 3.x环境下提供了丰富的UI组件，包括表格、按钮、对话框、通知等，为开发者提供了一套完整的界面解决方案。 Vue 3.x是Vue.js框架的最新迭代，带来了多项...
ak-design可视化低代码快速开发平台，使用基于vue3.x桌面端组件库 Elemnet-Plus，通过可视化的24.zip
02-15
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
基于Vue框架的element-ui离线文档
07-19
Element UI 是一个基于 Vue.js 的开源组件库，它提供了丰富的界面元素和设计模式，使得开发者能够快速构建美观且响应式的用户界面。Vue.js 框架以其轻量级、高效和易于学习的特点，在前端开发领域广受欢迎。Element ...
基于Element-plus封装的table表格
a22055的博客
10-09 882
现如今开发后台管理界面比较多，表格数据展示、表单添加验证、表格查询条件几乎必不可少，但是大都是重复操作，所以封装了表格、表单和表格查询组件来减少代码重复量，后续会发布表单和表格查询组件。以下是表格封装代码，可直接复制使用，具体表格参数可参考element-plus官方文档，如有其他要求，可直接在此基础上修改。
基于 Element-plus Table 封装的易用, 一致, 友好的 Vue Table 组件
weixin_37976729的博客
04-26 4795
基于 Element-plus Table 封装的易用, 一致, 友好的 Vue Table 组件
如何二次封装Element-Plus table组件
qq_64069576的博客
07-11 1009
这里取了个巧，因为后台接口要传的必传参几乎一样而且都是GET请求，我就把请求也直接页封装在组件里了，只需要传一个请求地址就可以正常渲染，项目的批量删除也在组件内部处理了，且表单数据也可以直接传入到组件的params属性，这样查询时也可以动态更新数据，封装的不是那么的全面，欢迎各位路过的大佬们给出指点和建议，互相学习进步！最近做了一个后台的项目,需要用到大量的表格组件,我就试着把它给封装了一下，记录一下，那么现在开始了。效果：这里分页也在组件处理了，所以也无需自己在弄分页了。
Element Plus二次封装el-table 扩展【表格动态列展示】
m0_67584973的博客
06-13 2953
Element Plus 基于二次封装的el-table组件动态的控制表格中列的显示或隐藏。
深入理解element-plus table二次封装：从理论到实践的全面指南
CRMEB小程序商城的博客
03-27 2560
在许多中后台管理系统中，表格占据着半壁江山，如果使用element plus组件库，那么少不了要用到table组件，可是table组件的功能过于基础，因此，我在table组件的实现基础之上进一步封装，从而实现功能更强大的table组件。在实现table组件的功能之前，我们首先需要先来看看用法，由于使用示例比较多，可能将会有几篇文章主要介绍所有示例用法，介绍完示例之后将会有专门的文章基于使用方式去详细讲解封装思路。
elementPlus的table二次封装
outsider76557的博客
02-14 3587
公司业务可能需要进行一些组件的封装，基于第三方ElementPlus框架，进行符合UI设计原型的组件封装，这篇主要讲解Table表格的封装，包含模拟对接后端数据。主要目的是梳理封装的思路，下面展示代码不包含样式代码。
vue中封装动态生成vxe-table的方法组件
m0_72993813的博客
12-01 772
通过以上步骤，您就可以动态生成 VXE-Table 组件，并将数据渲染到表格中。请根据您的实际需求进行调整和扩展。在上述示例中，我们首先导入 VXE-Table 的样式文件和所需的组件。然后，我们创建了一个名为。的方法，该方法接受一个数据数组作为参数。在方法内部，我们使用 Vue 3 的。钩子函数中，我们根据数据的第一项动态生成列配置，并将其赋值给。在上述示例中，我们首先导入了之前创建的。，其中包含了要显示在表格中的数据。然后，我们定义了一个模板，其中使用了。然后，我们定义了一个数据数组。
前端vue3 elemnet plus 树形table表格全选反选
06-01
Element Plus 的树形表格也可以使用类似的方式实现全选反选功能。以下是示例代码： ```html <template> <div> <el-checkbox v-model="allChecked" @change="selectAll">全选</el-checkbox> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" v-model="checkedItems"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> <script> import { ref, computed } from 'vue'; import { ElTable, ElTableColumn, ElCheckbox } from 'element-plus'; export default { components: { ElTable, ElTableColumn, ElCheckbox }, setup() { const tableData = ref([ { id: 1, name: 'John', age: 25, children: [ { id: 11, name: 'Mike', age: 22 }, { id: 12, name: 'Mary', age: 20 } ] }, { id: 2, name: 'Tom', age: 30, children: [ { id: 21, name: 'Jack', age: 28 }, { id: 22, name: 'Lucy', age: 26 } ] } ]); const checkedItems = ref([]); const checkAll = ref(false); const allChecked = computed({ get() { return checkedItems.value.length === tableData.value.length; }, set(val) { checkedItems.value = val ? tableData.value.slice() : []; } }); function selectAll() { checkedItems.value = allChecked.value ? [] : tableData.value.slice(); } return { tableData, checkedItems, checkAll, allChecked, selectAll }; } }; </script> ``` 在上面的代码中，我们使用 Element Plus 的 `ElTable` 和 `ElTableColumn` 组件来实现树形表格，用 `type="selection"` 的方式来添加选择列，将其与 `checkedItems` 变量绑定。在全选复选框中，我们使用 `ElCheckbox` 组件，并将其与 `allChecked` 变量绑定，使用 `@change` 事件监听全选复选框的状态变化，通过 `selectAll` 方法实现全选反选功能。 需要注意的是，在树形表格中，每一行数据可能还包含子节点，因此我们需要修改计算全选状态的逻辑，同时需要修改全选反选的实现方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZL随心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值