devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：weixin_40725706 | 2024-06-11 03:56:30

赞

踩

element plus封装表格组件

 前言

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

一、为什么封装？

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

二、使用场景

1.基础表格使用

 1.1、效果

        1.2、使用方式 

配置表格有哪些列

  1. const columns = [
  2.   {
  3.     label: "Date",
  4.     prop: "date",
  5.   },
  6.   {
  7.     label: "Name",
  8.     prop: "name",
  9.   },
  10.   {
  11.     label: "Address",
  12.     prop: "address",
  13.   },
  14. ];

表格数据

  1. const tableData = [
  2.   {
  3.     date: "2016-05-03",
  4.     name: "Tom",
  5.     address: "No. 189, Grove St, Los Angeles",
  6.   },
  7.   {
  8.     date: "2016-05-02",
  9.     name: "Tom",
  10.     address: "No. 189, Grove St, Los Angeles",
  11.   },
  12.   {
  13.     date: "2016-05-04",
  14.     name: "Tom",
  15.     address: "No. 189, Grove St, Los Angeles",
  16.   },
  17.   {
  18.     date: "2016-05-01",
  19.     name: "Tom",
  20.     address: "No. 189, Grove St, Los Angeles",
  21.   },
  22. ];

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

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

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

2.带斑马线表格

2.1、效果

2.2、使用方式 

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

  1. <MxeTableVue
  2.    :data="tableData"
  3.    :columns="columns"
  4.    stripe
  5.    @getList="getList"
  6. />

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

3.带边框表格

3.1、效果

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

3.2、使用方式 

  1.   <MxeTableVue
  2.     :data="tableData"
  3.      :columns="columns"
  4.      border
  5.      @getList="getList"
  6.   />

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

4.带状态表格

4.1、效果

4.2、使用方式

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

 表格组件使用的地方

  1. <MxeTableVue
  2.   :data="tableData"
  3.   :columns="columns"
  4.   :row-class-name="tableRowClassName"
  5.   @getList="getList"
  6. />

script 下增加

  1. const tableRowClassName = ({ row, rowIndex }) => {
  2.   if (rowIndex === 1) {
  3.     return "warning-row";
  4.   } else if (rowIndex === 3) {
  5.     return "success-row";
  6.   }
  7.   return "";
  8. };

5.多级表头

5.1、效果

5.2、使用方式

 使用表格组件的地方

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

列配置

  1. const columns = [
  2.   {
  3.     label: "Date",
  4.     prop: "date",
  5.   },
  6.   {
  7.     label: "Delivery Info",
  8.     children: [
  9.       {
  10.         label: "Name",
  11.         prop: "name",
  12.       },
  13.       {
  14.         label: "Address Info",
  15.         children: [
  16.           {
  17.             label: "State",
  18.             prop: "state",
  19.           },
  20.           {
  21.             label: "City",
  22.             prop: "city",
  23.           },
  24.           {
  25.             label: "Address",
  26.             prop: "address",
  27.           },
  28.           {
  29.             label: "Zip",
  30.             prop: "zip",
  31.           },
  32.         ],
  33.       },
  34.     ],
  35.   },
  36. ];

tableData 数据

  1. const tableData = [
  2.   {
  3.     date: "2016-05-03",
  4.     name: "Tom",
  5.     state: "California",
  6.     city: "Los Angeles",
  7.     address: "No. 189, Grove St, Los Angeles",
  8.     zip: "CA 90036",
  9.   },
  10.   {
  11.     date: "2016-05-02",
  12.     name: "Tom",
  13.     state: "California",
  14.     city: "Los Angeles",
  15.     address: "No. 189, Grove St, Los Angeles",
  16.     zip: "CA 90036",
  17.   },
  18.   {
  19.     date: "2016-05-04",
  20.     name: "Tom",
  21.     state: "California",
  22.     city: "Los Angeles",
  23.     address: "No. 189, Grove St, Los Angeles",
  24.     zip: "CA 90036",
  25.   },
  26.   {
  27.     date: "2016-05-01",
  28.     name: "Tom",
  29.     state: "California",
  30.     city: "Los Angeles",
  31.     address: "No. 189, Grove St, Los Angeles",
  32.     zip: "CA 90036",
  33.   },
  34.   {
  35.     date: "2016-05-08",
  36.     name: "Tom",
  37.     state: "California",
  38.     city: "Los Angeles",
  39.     address: "No. 189, Grove St, Los Angeles",
  40.     zip: "CA 90036",
  41.   },
  42.   {
  43.     date: "2016-05-06",
  44.     name: "Tom",
  45.     state: "California",
  46.     city: "Los Angeles",
  47.     address: "No. 189, Grove St, Los Angeles",
  48.     zip: "CA 90036",
  49.   },
  50.   {
  51.     date: "2016-05-07",
  52.     name: "Tom",
  53.     state: "California",
  54.     city: "Los Angeles",
  55.     address: "No. 189, Grove St, Los Angeles",
  56.     zip: "CA 90036",
  57.   },
  58. ];

6.单选表格

6.1、效果

6.2、使用方式

 表格使用的地方

  1.    <MxeTableVue
  2.       :data="tableData"
  3.       :columns="columns"
  4.       highlight-current-row
  5.       @current-change="handleCurrentChange"
  6.     />

列定义

  1. const columns = [
  2.   {
  3.     type: "index",
  4.     label: "序号",
  5.     width: 80,
  6.   },
  7.   {
  8.     label: "Date",
  9.     prop: "date",
  10.   },
  11.   {
  12.     label: "Name",
  13.     prop: "name",
  14.   },
  15.   {
  16.     label: "Address",
  17.     prop: "address",
  18.   },
  19. ];

 表格数据

  1. const tableData = [
  2.   {
  3.     date: "2016-05-03",
  4.     name: "Tom",
  5.     address: "No. 189, Grove St, Los Angeles",
  6.   },
  7.   {
  8.     date: "2016-05-02",
  9.     name: "Tom",
  10.     address: "No. 189, Grove St, Los Angeles",
  11.   },
  12.   {
  13.     date: "2016-05-04",
  14.     name: "Tom",
  15.     address: "No. 189, Grove St, Los Angeles",
  16.   },
  17.   {
  18.     date: "2016-05-01",
  19.     name: "Tom",
  20.     address: "No. 189, Grove St, Los Angeles",
  21.   },
  22. ];

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

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

7.多选表格

7.1、效果

7.2、使用方式

 表格使用的地方

  1.    <MxeTableVue
  2.       :data="tableData"
  3.       :columns="columns"
  4.       @selection-change="handleSelectionChange"
  5.     />

列定义

  1. const columns = [
  2.   {
  3.     type: "selection",
  4.     label: "序号",
  5.     width: 80,
  6.   },
  7.   {
  8.     label: "Date",
  9.     prop: "date",
  10.   },
  11.   {
  12.     label: "Name",
  13.     prop: "name",
  14.   },
  15.   {
  16.     label: "Address",
  17.     prop: "address",
  18.   },
  19. ];

 表格数据

  1. const tableData = [
  2.   {
  3.     date: "2016-05-03",
  4.     name: "Tom",
  5.     address: "No. 189, Grove St, Los Angeles",
  6.   },
  7.   {
  8.     date: "2016-05-02",
  9.     name: "Tom",
  10.     address: "No. 189, Grove St, Los Angeles",
  11.   },
  12.   {
  13.     date: "2016-05-04",
  14.     name: "Tom",
  15.     address: "No. 189, Grove St, Los Angeles",
  16.   },
  17.   {
  18.     date: "2016-05-01",
  19.     name: "Tom",
  20.     address: "No. 189, Grove St, Los Angeles",
  21.   },
  22. ];

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

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

8.带筛选表格

8.1、效果

8.2、使用方式

 表格使用的地方

  1. <MxeTableVue
  2.   :data="tableData"
  3.   :columns="columns"
  4. >
  5.   <template #tag="scope">
  6.     <el-tag
  7.       :type="scope.row.tag === 'Home' ? '' : 'success'"
  8.        disable-transitions
  9.     >{{ scope.row.tag }}</el-tag>
  10.   </template>
  11. </MxeTableVue>

列配置

  1.  
  2. const columns = [
  3.   {
  4.     label: "Date",
  5.     prop: "date",
  6.     columnKey: "date",
  7.     // 排序
  8.     sortable: true,
  9.     // 供筛选的内容，可以根据实际需要配置
  10.     filters: [
  11.       { text: "2016-05-01", value: "2016-05-01" },
  12.       { text: "2016-05-02", value: "2016-05-02" },
  13.       { text: "2016-05-03", value: "2016-05-03" },
  14.       { text: "2016-05-04", value: "2016-05-04" },
  15.     ],
  16.     filterMethod: (value, row, column) => {
  17.       const property = column["property"];
  18.       return row[property] === value;
  19.     },
  20.   },
  21.   {
  22.     label: "Name",
  23.     prop: "name",
  24.   },
  25.   {
  26.     label: "Address",
  27.     prop: "address",
  28.     // 使用插槽自定义列内容
  29.     slots: {
  30.       default: "tag",
  31.     },
  32.     filters: [
  33.       { text: "Home", value: "Home" },
  34.       { text: "Office", value: "Office" },
  35.     ],
  36.     filterMethod: (value, row) => {
  37.       return row.tag === value;
  38.     },
  39.     // 控制筛选框出现的位置
  40.     filterPlacement: "bottom-end",
  41.   },
  42. ];

 tableData 数据

  1. const tableData = [
  2.   {
  3.     date: "2016-05-03",
  4.     name: "Tom",
  5.     address: "No. 189, Grove St, Los Angeles",
  6.     tag: "Home",
  7.   },
  8.   {
  9.     date: "2016-05-02",
  10.     name: "Tom",
  11.     address: "No. 189, Grove St, Los Angeles",
  12.     tag: "Office",
  13.   },
  14.   {
  15.     date: "2016-05-04",
  16.     name: "Tom",
  17.     address: "No. 189, Grove St, Los Angeles",
  18.     tag: "Home",
  19.   },
  20.   {
  21.     date: "2016-05-01",
  22.     name: "Tom",
  23.     address: "No. 189, Grove St, Los Angeles",
  24.     tag: "Office",
  25.   },
  26. ];

9.带展开行的表格

 9.1、效果

 9.2、使用方式

表格使用的地方

  1. <MxeTableVue :data="tableData" :columns="columns">
  2.       <template #expand="scope">
  3.         <div m="4">
  4.           <p m="t-0 b-2">State: {{ scope.row.state }}</p>
  5.           <p m="t-0 b-2">City: {{ scope.row.city }}</p>
  6.           <p m="t-0 b-2">Address: {{ scope.row.address }}</p>
  7.           <p m="t-0 b-2">Zip: {{ scope.row.zip }}</p>
  8.           <h3>Family</h3>
  9.           <el-table :data="scope.row.family">
  10.             <el-table-column label="Name" prop="name" />
  11.             <el-table-column label="State" prop="state" />
  12.             <el-table-column label="City" prop="city" />
  13.             <el-table-column label="Address" prop="address" />
  14.             <el-table-column label="Zip" prop="zip" />
  15.           </el-table>
  16.         </div>
  17.       </template>
  18.     </MxeTableVue>

列配置

  1. const columns = [
  2.   {
  3.     type: "expand",
  4.     width: 50,
  5.     slots: {
  6.       default: "expand",
  7.     },
  8.   },
  9.   {
  10.     label: "Date",
  11.     prop: "date",
  12.   },
  13.   {
  14.     label: "Name",
  15.     prop: "name",
  16.   },
  17. ];

tableData 数据 

  1. const tableData = [
  2.   {
  3.     date: "2016-05-03",
  4.     name: "Tom",
  5.     state: "California",
  6.     city: "San Francisco",
  7.     address: "3650 21st St, San Francisco",
  8.     zip: "CA 94114",
  9.     family: [
  10.       {
  11.         name: "Jerry",
  12.         state: "California",
  13.         city: "San Francisco",
  14.         address: "3650 21st St, San Francisco",
  15.         zip: "CA 94114",
  16.       },
  17.       {
  18.         name: "Spike",
  19.         state: "California",
  20.         city: "San Francisco",
  21.         address: "3650 21st St, San Francisco",
  22.         zip: "CA 94114",
  23.       },
  24.       {
  25.         name: "Tyke",
  26.         state: "California",
  27.         city: "San Francisco",
  28.         address: "3650 21st St, San Francisco",
  29.         zip: "CA 94114",
  30.       },
  31.     ],
  32.   },
  33.   {
  34.     date: "2016-05-02",
  35.     name: "Tom",
  36.     state: "California",
  37.     city: "San Francisco",
  38.     address: "3650 21st St, San Francisco",
  39.     zip: "CA 94114",
  40.     family: [
  41.       {
  42.         name: "Jerry",
  43.         state: "California",
  44.         city: "San Francisco",
  45.         address: "3650 21st St, San Francisco",
  46.         zip: "CA 94114",
  47.       },
  48.       {
  49.         name: "Spike",
  50.         state: "California",
  51.         city: "San Francisco",
  52.         address: "3650 21st St, San Francisco",
  53.         zip: "CA 94114",
  54.       },
  55.       {
  56.         name: "Tyke",
  57.         state: "California",
  58.         city: "San Francisco",
  59.         address: "3650 21st St, San Francisco",
  60.         zip: "CA 94114",
  61.       },
  62.     ],
  63.   },
  64.   {
  65.     date: "2016-05-04",
  66.     name: "Tom",
  67.     state: "California",
  68.     city: "San Francisco",
  69.     address: "3650 21st St, San Francisco",
  70.     zip: "CA 94114",
  71.     family: [
  72.       {
  73.         name: "Jerry",
  74.         state: "California",
  75.         city: "San Francisco",
  76.         address: "3650 21st St, San Francisco",
  77.         zip: "CA 94114",
  78.       },
  79.       {
  80.         name: "Spike",
  81.         state: "California",
  82.         city: "San Francisco",
  83.         address: "3650 21st St, San Francisco",
  84.         zip: "CA 94114",
  85.       },
  86.       {
  87.         name: "Tyke",
  88.         state: "California",
  89.         city: "San Francisco",
  90.         address: "3650 21st St, San Francisco",
  91.         zip: "CA 94114",
  92.       },
  93.     ],
  94.   },
  95.   {
  96.     date: "2016-05-01",
  97.     name: "Tom",
  98.     state: "California",
  99.     city: "San Francisco",
  100.     address: "3650 21st St, San Francisco",
  101.     zip: "CA 94114",
  102.     family: [
  103.       {
  104.         name: "Jerry",
  105.         state: "California",
  106.         city: "San Francisco",
  107.         address: "3650 21st St, San Francisco",
  108.         zip: "CA 94114",
  109.       },
  110.       {
  111.         name: "Spike",
  112.         state: "California",
  113.         city: "San Francisco",
  114.         address: "3650 21st St, San Francisco",
  115.         zip: "CA 94114",
  116.       },
  117.       {
  118.         name: "Tyke",
  119.         state: "California",
  120.         city: "San Francisco",
  121.         address: "3650 21st St, San Francisco",
  122.         zip: "CA 94114",
  123.       },
  124.     ],
  125.   },
  126.   {
  127.     date: "2016-05-08",
  128.     name: "Tom",
  129.     state: "California",
  130.     city: "San Francisco",
  131.     address: "3650 21st St, San Francisco",
  132.     zip: "CA 94114",
  133.     family: [
  134.       {
  135.         name: "Jerry",
  136.         state: "California",
  137.         city: "San Francisco",
  138.         address: "3650 21st St, San Francisco",
  139.         zip: "CA 94114",
  140.       },
  141.       {
  142.         name: "Spike",
  143.         state: "California",
  144.         city: "San Francisco",
  145.         address: "3650 21st St, San Francisco",
  146.         zip: "CA 94114",
  147.       },
  148.       {
  149.         name: "Tyke",
  150.         state: "California",
  151.         city: "San Francisco",
  152.         address: "3650 21st St, San Francisco",
  153.         zip: "CA 94114",
  154.       },
  155.     ],
  156.   },
  157.   {
  158.     date: "2016-05-06",
  159.     name: "Tom",
  160.     state: "California",
  161.     city: "San Francisco",
  162.     address: "3650 21st St, San Francisco",
  163.     zip: "CA 94114",
  164.     family: [
  165.       {
  166.         name: "Jerry",
  167.         state: "California",
  168.         city: "San Francisco",
  169.         address: "3650 21st St, San Francisco",
  170.         zip: "CA 94114",
  171.       },
  172.       {
  173.         name: "Spike",
  174.         state: "California",
  175.         city: "San Francisco",
  176.         address: "3650 21st St, San Francisco",
  177.         zip: "CA 94114",
  178.       },
  179.       {
  180.         name: "Tyke",
  181.         state: "California",
  182.         city: "San Francisco",
  183.         address: "3650 21st St, San Francisco",
  184.         zip: "CA 94114",
  185.       },
  186.     ],
  187.   },
  188.   {
  189.     date: "2016-05-07",
  190.     name: "Tom",
  191.     state: "California",
  192.     city: "San Francisco",
  193.     address: "3650 21st St, San Francisco",
  194.     zip: "CA 94114",
  195.     family: [
  196.       {
  197.         name: "Jerry",
  198.         state: "California",
  199.         city: "San Francisco",
  200.         address: "3650 21st St, San Francisco",
  201.         zip: "CA 94114",
  202.       },
  203.       {
  204.         name: "Spike",
  205.         state: "California",
  206.         city: "San Francisco",
  207.         address: "3650 21st St, San Francisco",
  208.         zip: "CA 94114",
  209.       },
  210.       {
  211.         name: "Tyke",
  212.         state: "California",
  213.         city: "San Francisco",
  214.         address: "3650 21st St, San Francisco",
  215.         zip: "CA 94114",
  216.       },
  217.     ],
  218.   },
  219. ];

10.自定义表头表格

10.1、效果

10.2、使用方式

使用表格的地方

  1. <MxeTableVue :data="tableData" :columns="columns">
  2.       <template #opera-header="scope">
  3.         <el-input size="small" placeholder="Type to search" />
  4.       </template>
  5.       <template #opera>
  6.         <el-button size="small">Edit</el-button>
  7.         <el-button size="small" type="danger">Delete</el-button>
  8.       </template>
  9.     </MxeTableVue>

列配置

  1.  
  2. const columns = [
  3.   {
  4.     label: "Date",
  5.     prop: "date",
  6.   },
  7.   {
  8.     label: "Name",
  9.     prop: "name",
  10.   },
  11.   {
  12.     slots: {
  13.       header: "opera-header",
  14.       default: "opera",
  15.     },
  16.   },
  17. ];

tableData 数据

  1. const tableData = [
  2.   {
  3.     date: "2016-05-03",
  4.     name: "Tom",
  5.     address: "No. 189, Grove St, Los Angeles",
  6.   },
  7.   {
  8.     date: "2016-05-02",
  9.     name: "John",
  10.     address: "No. 189, Grove St, Los Angeles",
  11.   },
  12.   {
  13.     date: "2016-05-04",
  14.     name: "Morgan",
  15.     address: "No. 189, Grove St, Los Angeles",
  16.   },
  17.   {
  18.     date: "2016-05-01",
  19.     name: "Jessy",
  20.     address: "No. 189, Grove St, Los Angeles",
  21.   },
  22. ];

11、树形数据表格

 11.1、效果

11.2、使用方式

表格使用的地方

  1. <MxeTableVue
  2.       :data="tableData"
  3.       :columns="columns"
  4.       row-key="id"
  5.       border
  6.       default-expand-all
  7.     />

列配置

  1. const columns = [
  2.   {
  3.     label: "Date",
  4.     prop: "date",
  5.   },
  6.   {
  7.     label: "Name",
  8.     prop: "name",
  9.   },
  10.   {
  11.     label: "Address",
  12.     prop: "address",
  13.   },
  14. ];

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

  1. const tableData = [
  2.   {
  3.     id: 1,
  4.     date: "2016-05-02",
  5.     name: "wangxiaohu",
  6.     address: "No. 189, Grove St, Los Angeles",
  7.     children: [
  8.       {
  9.         id: 2,
  10.         date: "2016-05-01",
  11.         name: "wangxiaohu",
  12.         address: "No. 189, Grove St, Los Angeles",
  13.         children: [
  14.           {
  15.             id: 3,
  16.             date: "2016-05-01",
  17.             name: "wangxiaohu",
  18.             address: "No. 189, Grove St, Los Angeles",
  19.           },
  20.           {
  21.             id: 4,
  22.             date: "2016-05-01",
  23.             name: "wangxiaohu",
  24.             address: "No. 189, Grove St, Los Angeles",
  25.           },
  26.         ],
  27.       },
  28.       {
  29.         id: 5,
  30.         date: "2016-05-01",
  31.         name: "wangxiaohu",
  32.         address: "No. 189, Grove St, Los Angeles",
  33.         children: [
  34.           {
  35.             id: 6,
  36.             date: "2016-05-01",
  37.             name: "wangxiaohu",
  38.             address: "No. 189, Grove St, Los Angeles",
  39.           },
  40.           {
  41.             id: 7,
  42.             date: "2016-05-01",
  43.             name: "wangxiaohu",
  44.             address: "No. 189, Grove St, Los Angeles",
  45.           },
  46.         ],
  47.       },
  48.     ],
  49.   },
  50.   {
  51.     id: 8,
  52.     date: "2016-05-04",
  53.     name: "wangxiaohu",
  54.     address: "No. 189, Grove St, Los Angeles",
  55.     children: [
  56.       {
  57.         id: 9,
  58.         date: "2016-05-01",
  59.         name: "wangxiaohu",
  60.         address: "No. 189, Grove St, Los Angeles",
  61.       },
  62.       {
  63.         id: 10,
  64.         date: "2016-05-01",
  65.         name: "wangxiaohu",
  66.         address: "No. 189, Grove St, Los Angeles",
  67.       },
  68.     ],
  69.   },
  70.   {
  71.     id: 11,
  72.     date: "2016-05-01",
  73.     name: "wangxiaohu",
  74.     address: "No. 189, Grove St, Los Angeles",
  75.     children: [
  76.       {
  77.         id: 12,
  78.         date: "2016-05-01",
  79.         name: "wangxiaohu",
  80.         address: "No. 189, Grove St, Los Angeles",
  81.       },
  82.       {
  83.         id: 13,
  84.         date: "2016-05-01",
  85.         name: "wangxiaohu",
  86.         address: "No. 189, Grove St, Los Angeles",
  87.       },
  88.     ],
  89.   },
  90. ];

12.懒加载表格

 12.1、效果

  12.2、使用方式

表格使用的地方

  1. <MxeTableVue
  2.       :data="tableData"
  3.       :columns="columns"
  4.       row-key="id"
  5.       border
  6.       lazy
  7.       :load="load"
  8.       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  9.     />

列配置

  1. const columns = [
  2.   {
  3.     label: "Date",
  4.     prop: "date",
  5.   },
  6.   {
  7.     label: "Name",
  8.     prop: "name",
  9.   },
  10.   {
  11.     label: "Address",
  12.     prop: "address",
  13.   },
  14. ];

 tableData 数据

  1. const tableData = [
  2.   {
  3.     id: 1,
  4.     date: "2016-05-02",
  5.     name: "wangxiaohu",
  6.     address: "No. 189, Grove St, Los Angeles",
  7.   },
  8.   {
  9.     id: 2,
  10.     date: "2016-05-04",
  11.     name: "wangxiaohu",
  12.     address: "No. 189, Grove St, Los Angeles",
  13.   },
  14.   {
  15.     id: 3,
  16.     date: "2016-05-01",
  17.     name: "wangxiaohu",
  18.     hasChildren: true,
  19.     address: "No. 189, Grove St, Los Angeles",
  20.   },
  21.   {
  22.     id: 4,
  23.     date: "2016-05-03",
  24.     name: "wangxiaohu",
  25.     address: "No. 189, Grove St, Los Angeles",
  26.   },
  27. ];

load 方法

  1. const load = (row, treeNode, resolve) => {
  2.   // 模拟请求后端数据 
  3.   setTimeout(() => {
  4.     resolve([
  5.       {
  6.         id: 31,
  7.         date: "2016-05-01",
  8.         name: "wangxiaohu",
  9.         address: "No. 189, Grove St, Los Angeles",
  10.       },
  11.       {
  12.         id: 32,
  13.         date: "2016-05-01",
  14.         name: "wangxiaohu",
  15.         address: "No. 189, Grove St, Los Angeles",
  16.       },
  17.     ]);
  18.   }, 1000);
  19. };

13、表格显示尾合计行

13.1、效果

13.2、使用方式

表格使用的地方

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

列配置

  1. const columns = [
  2.   {
  3.     label: "ID",
  4.     prop: "id",
  5.   },
  6.   {
  7.     label: "Name",
  8.     prop: "name",
  9.   },
  10.   {
  11.     label: "Amount 1",
  12.     prop: "amount1",
  13.     sortable: true,
  14.   },
  15.   {
  16.     label: "Amount 2",
  17.     prop: "amount2",
  18.     sortable: true,
  19.   },
  20.   {
  21.     label: "Amount 3",
  22.     prop: "amount3",
  23.     sortable: true,
  24.   },
  25. ];

tableData 数据

  1. const tableData = [
  2.   {
  3.     id: "12987122",
  4.     name: "Tom",
  5.     amount1: "234",
  6.     amount2: "3.2",
  7.     amount3: 10,
  8.   },
  9.   {
  10.     id: "12987123",
  11.     name: "Tom",
  12.     amount1: "165",
  13.     amount2: "4.43",
  14.     amount3: 12,
  15.   },
  16.   {
  17.     id: "12987124",
  18.     name: "Tom",
  19.     amount1: "324",
  20.     amount2: "1.9",
  21.     amount3: 9,
  22.   },
  23.   {
  24.     id: "12987125",
  25.     name: "Tom",
  26.     amount1: "621",
  27.     amount2: "2.2",
  28.     amount3: 17,
  29.   },
  30.   {
  31.     id: "12987126",
  32.     name: "Tom",
  33.     amount1: "539",
  34.     amount2: "4.1",
  35.     amount3: 15,
  36.   },
  37. ];

 14.合并行列的表格

  14.1、效果

14.2、使用方式

表格使用的地方

  1. <MxeTableVue
  2.       :data="tableData"
  3.       :columns="columns"
  4.       :span-method="arraySpanMethod"
  5.       border
  6.     />

列配置

  1. const columns = [
  2.   {
  3.     label: "ID",
  4.     prop: "id",
  5.   },
  6.   {
  7.     label: "Name",
  8.     prop: "name",
  9.   },
  10.   {
  11.     label: "Amount 1",
  12.     prop: "amount1",
  13.   },
  14.   {
  15.     label: "Amount 2",
  16.     prop: "amount2",
  17.   },
  18.   {
  19.     label: "Amount 3",
  20.     prop: "amount3",
  21.   },
  22. ];

 tableData 表格数据

  1. const tableData = [
  2.   {
  3.     id: "12987122",
  4.     name: "Tom",
  5.     amount1: "234",
  6.     amount2: "3.2",
  7.     amount3: 10,
  8.   },
  9.   {
  10.     id: "12987123",
  11.     name: "Tom",
  12.     amount1: "165",
  13.     amount2: "4.43",
  14.     amount3: 12,
  15.   },
  16.   {
  17.     id: "12987124",
  18.     name: "Tom",
  19.     amount1: "324",
  20.     amount2: "1.9",
  21.     amount3: 9,
  22.   },
  23.   {
  24.     id: "12987125",
  25.     name: "Tom",
  26.     amount1: "621",
  27.     amount2: "2.2",
  28.     amount3: 17,
  29.   },
  30.   {
  31.     id: "12987126",
  32.     name: "Tom",
  33.     amount1: "539",
  34.     amount2: "4.1",
  35.     amount3: 15,
  36.   },
  37. ];

 15、带分页的表格

 15.1、效果

 15.2、使用方式

表格使用的地方

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

 列配置

  1. const columns = [
  2.   {
  3.     label: "ID",
  4.     prop: "id",
  5.   },
  6.   {
  7.     label: "Name",
  8.     prop: "name",
  9.   },
  10.   {
  11.     label: "Amount 1",
  12.     prop: "amount1",
  13.   },
  14.   {
  15.     label: "Amount 2",
  16.     prop: "amount2",
  17.   },
  18.   {
  19.     label: "Amount 3",
  20.     prop: "amount3",
  21.   },
  22. ];

tableData 表格数据

  1. const tableData = [
  2.   {
  3.     id: "12987122",
  4.     name: "Tom",
  5.     amount1: "234",
  6.     amount2: "3.2",
  7.     amount3: 10,
  8.   },
  9.   {
  10.     id: "12987123",
  11.     name: "Tom",
  12.     amount1: "165",
  13.     amount2: "4.43",
  14.     amount3: 12,
  15.   },
  16.   {
  17.     id: "12987124",
  18.     name: "Tom",
  19.     amount1: "324",
  20.     amount2: "1.9",
  21.     amount3: 9,
  22.   },
  23.   {
  24.     id: "12987125",
  25.     name: "Tom",
  26.     amount1: "621",
  27.     amount2: "2.2",
  28.     amount3: 17,
  29.   },
  30.   {
  31.     id: "12987126",
  32.     name: "Tom",
  33.     amount1: "539",
  34.     amount2: "4.1",
  35.     amount3: 15,
  36.   },
  37. ];

 16、表格使用总结

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

 

三、表格源码

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

  1. <script setup>
  2. import { ref, computed } from "vue";
  3. import MxeTableColumn from "./mxe-table-column.vue";
  4.  
  5. const props = defineProps({
  6.   data: {
  7.     type: Array,
  8.     default: () => [],
  9.   },
  10.   columns: {
  11.     type: Array,
  12.     default: () => [],
  13.   },
  14.   pageIndex: {
  15.     type: Number,
  16.   },
  17.   pageSize: {
  18.     type: Number,
  19.   },
  20.   total: {
  21.     type: Number,
  22.   },
  23. });
  24.  
  25. const emits = defineEmits(["update:pageIndex", "update:pageSize", "getList"]);
  26.  
  27. const page = ref({
  28.   pageIndex: computed({
  29.     get: () => props.pageIndex,
  30.     set(pageIndex) {
  31.       emits("update:pageIndex", pageIndex);
  32.     },
  33.   }),
  34.   pageSize: computed({
  35.     get: () => props.pageSize,
  36.     set(pageSize) {
  37.       emits("update:pageSize", pageSize);
  38.     },
  39.   }),
  40. });
  41.  
  42. const handleSizeChange = () => {
  43.   page.value.pageIndex = 1;
  44.   emits("getList");
  45. };
  46. </script>
  47.  
  48. <template>
  49.   <!-- v-bind="$attrs" 将不被props接收的参数都绑定到 el-table -->
  50.   <div class="table-and-pager">
  51.     <div class="table-box">
  52.       <el-table :data="data" style="width: 100%; height: 100%" v-bind="$attrs">
  53.         <MxeTableColumn :columns="columns">
  54.           <!-- 插槽透传, 不然, 如果是多级表头, 里层接收不到 -->
  55.           <!-- $slots 是所有传进来的插槽的信息 -->
  56.           <template
  57.             v-for="name in Object.keys($slots)"
  58.             :key="name"
  59.             #[name]="scope"
  60.           >
  61.             <slot :name="name" v-bind="scope" />
  62.           </template>
  63.         </MxeTableColumn>
  64.         <template #empty>
  65.           <!-- 给一个空组件 -->
  66.           <div>空空如也{{ $slots }}</div>
  67.         </template>
  68.       </el-table>
  69.     </div>
  70.     <div class="pager-box" v-if="props.pageIndex && props.pageSize">
  71.       <el-pagination
  72.         v-model:current-page="page.pageIndex"
  73.         v-model:page-size="page.pageSize"
  74.         :page-sizes="[100, 200, 300, 400]"
  75.         layout="total, prev, pager, next, sizes, jumper"
  76.         :total="total"
  77.         @size-change="handleSizeChange"
  78.         @current-change="emits('getList')"
  79.       />
  80.     </div>
  81.   </div>
  82. </template>
  83.  
  84. <style scoped lang="less">
  85. .table-and-pager {
  86.   width: 100%;
  87.   height: 100%;
  88.   .table-box {
  89.     width: 100%;
  90.     height: calc(100% - 50px);
  91.     // 当有表位有合计行时, 改变其背景颜色, 使用与表格主体颜色统一一点
  92.     :deep(.el-table tfoot td.el-table__cell) {
  93.       background: #fff;
  94.     }
  95.   }
  96.   .pager-box {
  97.     width: 100%;
  98.     height: 50px;
  99.     display: flex;
  100.     justify-content: flex-end;
  101.     align-items: center;
  102.   }
  103. }
  104. </style>

mxe-table-column.vue

  1. <script setup>
  2. import { omit } from "lodash-es";
  3.  
  4. const props = defineProps({
  5.   columns: {
  6.     type: Array,
  7.     default: () => [],
  8.   },
  9. });
  10. </script>
  11.  
  12. <template>
  13.   <el-table-column
  14.     v-for="column in columns"
  15.     v-bind="omit(column, ['children'])"
  16.   >
  17.     <template #default="scope">
  18.       <slot
  19.         v-if="column?.slots?.default && !column.children?.length"
  20.         :name="column.slots.default"
  21.         v-bind="scope"
  22.       />
  23.       <template v-else-if="column.children?.length">
  24.         <!-- 递归调用, .vue文件名 是非index的，可以直接使用文件名调用自己 -->
  25.         <MxeTableColumn :columns="column.children">
  26.           <template
  27.             v-for="name in Object.keys($slots)"
  28.             :key="name"
  29.             #[name]="scope"
  30.           >
  31.             <slot :name="name" v-bind="scope" />
  32.           </template>
  33.         </MxeTableColumn>
  34.       </template>
  35.     </template>
  36.  
  37.     <template #header="scope">
  38.       <slot
  39.         v-if="column?.slots?.header"
  40.         :name="column.slots.header"
  41.         v-bind="scope"
  42.       />
  43.     </template>
  44.   </el-table-column>
  45. </template>
  46.  
  47. <style scoped></style>

四、总结

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/701623
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号