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

基于vue和element-ui的表格组件，主推数据渲染，支持内容和方法灵活绑定，提供动态具名插槽自定义内容_elementui表格 v-btn 属性

作者：笔触狂放9 | 2024-04-15 06:37:37

赞

踩

elementui表格 v-btn 属性

        组件名为commonTable，主要是基于element-ui中的表格组件进行二次封装的组件，集成了常用的表格功能，除默认内容的显示外，还包括以下几点：

        1. 状态的筛选和显示；

        2. 操作按钮的显示和方法绑定；

        3. 自定义具名插槽内容的封装；

        4. 表格内容的翻页。

        除了提供的常用功能外，主要是希望可以通过组件的封装和应用，进一步理解和应用SPA框架主推的数据驱动理念，真正通过数据来描述页面应用。我们来看具体代码：

        应用实例：

  1. <!-- 表格组件 -->
  2.     <CommonTable :tableData="tableData" :tableConfig="tableConfig" :pageConfig="pageConfig"></CommonTable>

         组件包含三个主要参数，分别是：

        tableData：表格组件的数据内容，通常通过后端接口获取；

  1. // 表格数据内容
  2.         tableData: [
  3.             {
  4.                 "id": "001",
  5.                 "name": "小明",
  6.                 "sex": 1,
  7.                 "address": "北京市"
  8.             },
  9.             {
  10.                 "id": "002",
  11.                 "name": "小红",
  12.                 "sex": 2,
  13.                 "address": "上海市"
  14.             }
  15.         ],

        tableConfig：表格组件的配置，通过这个配置，组件自动生成表格；

  1. // 表格配置
  2.         tableConfig: [
  3.           {
  4.               label: "名称",
  5.               prop: "name",
  6.               sortable: true,
  7.           },
  8.           {
  9.               label: "性别",
  10.               prop: "sex",
  11.               type: "status",
  12.               callback: (scope) => {
  13.                 switch(scope.row.sex) {
  14.                   case 1 :
  15.                     return {
  16.                       text: '男',
  17.                       color: 'blue'
  18.                     }
  19.                   case 2 :
  20.                     return {
  21.                       text: '女',
  22.                       color: 'red'
  23.                     }
  24.                 }
  25.               }
  26.           },
  27.           {
  28.               label: "地址",
  29.               prop: "address",
  30.               type: "slot"
  31.           },
  32.           {
  33.               label: "操作",
  34.               prop: "operate",
  35.               type: "operate",
  36.               operateList: (scope) => {
  37.                 return [
  38.                   {
  39.                     text: "编辑",
  40.                     callback: (scope) => {console.log("编辑"+scope.row)}
  41.                   },
  42.                   {
  43.                     text: "删除",
  44.                     color: "red",
  45.                     callback: () => {console.log("删除"+scope.row)}
  46.                   },
  47.                 ]
  48.               }
  49.           },
  50.         ],

        pageConfig：表格组件的分页配置，翻页等方法也都在这里配置，如果不写，默认没有分页功能。

  1. // 分页配置
  2.         pageConfig: {
  3.           sizeChange: (val) => {console.log('sizeChange--'+val)},
  4.           currentChange: (val) => {console.log('currentChange--'+val)},
  5.           pageSizes: [10, 20, 50],
  6.           layout: "total, prev, pager, next, sizes",
  7.           pageSize: 10,
  8.           total: 100,
  9.           currentPage: 1
  10.         }

       表格主要分为四种不同类型的内容，通过type来区分不同类型，当没有type值的时候，就传入默认的数据内容，下面详细看下代码：

1. 自定义类型：（type: slot）

        通过vue的具名插槽的功能，在组件中插入同名的插槽，插槽名为prop属性内容，插槽内容可以自定义，通过scope传入表格当前行的数据来进行数据操作。vue提供了一个方法来进行动态的具名插槽绑定，用v-slot动态绑定插槽名。

  1. <!-- 示例 -->
  2.     <CommonTable :tableData="tableData" :tableConfig="tableConfig" :pageConfig="pageConfig">
  3.         <template v-slot:self="{ scope }">
  4.             <div>{{ scope.row }}</div>
  5.         </template>
  6.     </CommonTable>
  1. <!-- 自定义类型 -->
  2.           <el-table-column
  3.             v-if="item.type === 'slot'"
  4.             :key="index"
  5.             :prop="item.prop"
  6.             :width="item.width"
  7.             :label="item.label"
  8.             :sortable="item.sortable">
  9.             <template slot-scope="scope">
  10.               <slot :name="item.prop" :scope="scope"></slot>
  11.             </template>
  12.           </el-table-column>

2.状态类型：（type: status）

        表格中经常会用到一些用来标识状态的标签，例如性别、身份等。并且经常会遇到需要对后端接口提供的数据进行转义，例如等于1的时候是男性，等于2的时候是女性。可以在组件中提前封装好需要的状态类型标签，并且内容和颜色，可以通过text和color两种属性来自由搭配。保证了全局标签样式的统一性的同时，也提供了一定的可自定义化。

  1. <!-- 状态类型 -->
  2.           <el-table-column
  3.             v-if="item.type === 'status'"
  4.             :key="index"
  5.             :prop="item.prop"
  6.             :width="item.width"
  7.             :label="item.label"
  8.             :sortable="item.sortable">
  9.             <template slot-scope="scope">
  10.               <span v-if="item.callback(scope).color === 'blue'" class="status-label label-blue">{{ item.callback(scope).text }}</span>
  11.               <span v-if="item.callback(scope).color === 'red'" class="status-label label-red">{{ item.callback(scope).text }}</span>
  12.               <span v-if="!item.callback(scope).color">{{ item.callback(scope).text }}</span>
  13.             </template>
  14.           </el-table-column>

 3. 操作类型：（type: operate）

        表格最后一列通常包含相应的操作，例如编辑、删除等。在组件中封装好操作类型，在使用的时候可以灵活搭配操作按钮的展示内容和绑定的方法。operateList返回按钮列表，通过名为show的属性可以根据不同的条件应用不同的按钮，通过callback属性来绑定按钮的方法。

  1. <!-- 操作类型 -->
  2.           <el-table-column
  3.             v-if="item.type === 'operate'"
  4.             :key="index"
  5.             :prop="item.prop"
  6.             :width="item.width"
  7.             :label="item.label"
  8.             :sortable="item.sortable">
  9.             <template slot-scope="scope">
  10.               <template v-for="(operateItem, operateIndex) in item.operateList(scope)">
  11.                 <span
  12.                   v-if="operateItem.show === undefined || operateItem"
  13.                   :key="operateIndex"
  14.                   @click="operateItem.callback(scope)"
  15.                   :class="['operate-button', operateItem.color === 'red' ? 'operate-red' : '']">{{ operateItem.text }}</span>
  16.               </template>
  17.             </template>
  18.           </el-table-column>

4. 默认类型：（type: none）

        当type值不存在的时候，默认展示prop属性对应的表格数据内容。

  1. <!-- 默认类型 -->
  2.           <el-table-column
  3.             v-if="!item.type"
  4.             :key="index+index"
  5.             :prop="item.prop"
  6.             :width="item.width"
  7.             :label="item.label"
  8.             :sortable="item.sortable"
  9.             :show-overflow-tooltip="true">
  10.             <template slot-scope="scope">
  11.               <span>{{ scope.row[item.prop] }}</span>
  12.             </template>
  13.           </el-table-column>

        总结一下，在element-ui的table组件和pagination组件的基础上进行封装，以达成全局数据驱动渲染表格内容，实现表格展示和操作的目的。

四种类型分别是：

        自定义类型、标签类型、操作类型和默认类型。

三个主要参数是：

        tableData（数据内容）、tableConfig（表格配置）、pageConfig（分页配置）

属性说明：

        1. 通过label属性或者text属性参数来展示表格需要显示的内容；

        2. 通过prop属性来绑定对应数据的字段名；

        3. 通过show属性来绑定内容是否显示的条件，通过color属性绑定内容样式；

        4. 通过callback属性绑定需要的操作方法，callback中的scope参数绑定当前数据内容。

组件优势：

        全局数据驱动，统一表格组件的同时，提供了表格展示内容和操作方法的灵活绑定，并提供了动态具名插槽进行内容自定义。

看下渲染后的效果：

最后附上完整组件代码：

  1. <template>
  2.     <div class="common-table">
  3.       <el-table
  4.         :stripe="stripe"
  5.         :height="height"
  6.         :data="tableData"
  7.         :config="tableConfig"
  8.         empty-text="暂无数据">
  9.         <template v-for="(item, index) in tableConfig">
  10.           <!-- 自定义类型 -->
  11.           <el-table-column
  12.             v-if="item.type === 'slot'"
  13.             :key="index"
  14.             :prop="item.prop"
  15.             :width="item.width"
  16.             :label="item.label"
  17.             :sortable="item.sortable">
  18.             <template slot-scope="scope">
  19.               <slot :name="item.prop" :scope="scope"></slot>
  20.             </template>
  21.           </el-table-column>
  22.  
  23.           <!-- 状态类型 -->
  24.           <el-table-column
  25.             v-if="item.type === 'status'"
  26.             :key="index"
  27.             :prop="item.prop"
  28.             :width="item.width"
  29.             :label="item.label"
  30.             :sortable="item.sortable">
  31.             <template slot-scope="scope">
  32.               <span v-if="item.callback(scope).color === 'blue'" class="status-label label-blue">{{ item.callback(scope).text }}</span>
  33.               <span v-if="item.callback(scope).color === 'red'" class="status-label label-red">{{ item.callback(scope).text }}</span>
  34.               <span v-if="!item.callback(scope).color">{{ item.callback(scope).text }}</span>
  35.             </template>
  36.           </el-table-column>
  37.  
  38.           <!-- 操作类型 -->
  39.           <el-table-column
  40.             v-if="item.type === 'operate'"
  41.             :key="index"
  42.             :prop="item.prop"
  43.             :width="item.width"
  44.             :label="item.label"
  45.             :sortable="item.sortable">
  46.             <template slot-scope="scope">
  47.               <template v-for="(operateItem, operateIndex) in item.operateList(scope)">
  48.                 <span
  49.                   v-if="operateItem.show === undefined || operateItem"
  50.                   :key="operateIndex"
  51.                   @click="operateItem.callback(scope)"
  52.                   :class="['operate-button', operateItem.color === 'red' ? 'operate-red' : '']">{{ operateItem.text }}</span>
  53.               </template>
  54.             </template>
  55.           </el-table-column>
  56.  
  57.           <!-- 默认类型 -->
  58.           <el-table-column
  59.             v-if="!item.type"
  60.             :key="index+index"
  61.             :prop="item.prop"
  62.             :width="item.width"
  63.             :label="item.label"
  64.             :sortable="item.sortable"
  65.             :show-overflow-tooltip="true">
  66.             <template slot-scope="scope">
  67.               <span>{{ scope.row[item.prop] }}</span>
  68.             </template>
  69.           </el-table-column>
  70.  
  71.         </template>
  72.  
  73.       </el-table>
  74.  
  75.       <!-- 分页 -->
  76.       <el-pagination
  77.         v-if="pageConfig"
  78.         class="table-page"
  79.         @size-change="pageConfig.sizeChange"
  80.         @current-change="pageConfig.currentChange"
  81.         :page-sizes="pageConfig.pageSizes"
  82.         :layout="pageConfig.layout || 'total, prev, pager, next, sizes'"
  83.         :page-size="pageConfig.pageSize"
  84.         :current-page="pageConfig.currentPage"
  85.         :total="pageConfig.total">
  86.       </el-pagination>
  87.     </div>
  88.   </template>
  89.   
  90.   <script>
  91.     export default {
  92.       props: {
  93.         tableConfig: {
  94.           type: Array,
  95.           default: () => []
  96.         },
  97.         tableData: {
  98.           type: Array,
  99.           default: () => []
  100.         },
  101.         pageConfig: {
  102.           type: Object,
  103.           default: () => {}
  104.         },
  105.         stripe: {
  106.           type: Boolean,
  107.         },
  108.         height: {
  109.           type: String,
  110.         },
  111.       },
  112.       data () {
  113.         return {}
  114.       },
  115.       mounted() {
  116.       },
  117.       methods: {
  118.       }
  119.     }
  120.   </script>
  121.   
  122.   <style lang="scss">
  123.     .operate-button {
  124.       display: inline-block;
  125.       margin-right: 5px;
  126.       color: #09f;
  127.       &:hover {
  128.         cursor: pointer;
  129.       }
  130.     }
  131.     .operate-red {
  132.       color: #f00;
  133.     }
  134.     .status-label {
  135.       display: inline-block;
  136.       width: 60px;
  137.       height: 25px;
  138.       text-align: center;
  139.       line-height: 25px;
  140.       border-radius: 5px;
  141.     }
  142.     .label-blue {
  143.       background: rgba(164, 205, 245, 0.5);
  144.       color: #0888de;
  145.       border: 1px solid #0888de;
  146.     }
  147.     .label-red {
  148.       background: rgb(240 141 181 / 50%);
  149.       color: #de083a;
  150.       border: 1px solid #de083a;
  151.     }
  152.   </style>

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

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

  

闽ICP备14008679号