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

两种方式对el-table二次封装

作者：繁依Fanyi0 | 2024-05-25 10:16:41

赞

踩

el-table二次封装

1、序言

        完整源码：el-table-example: 两种方式对el-table二次封装

        最近在公司写了好多的后台管理系统，管理系统很大部分都是elementui下的el-table，el-table中有很多 <el-table-column></el-table-column>是重复的，像这样：

        能不能通过配置项让其自动生成 <el-table-column></el-table-column>，省去冗余代码。下一次管理系统添加新模块相似的内容，就不用复制粘贴了。有一说一，复制粘贴完成需求速度非常快、并且效果不错，但是代码就像屎山，冗余度、可维护性都比较差，长期复制粘贴没什么成长！

2、自定义组件方式封装el-table

  2.1、封装

        （1）在src下建立components文件夹

        （2）在components文件夹下建立Table/index.vue、index.js两个文件夹

        （3）index.js文件全局注册封装的Table组件

  1. import Vue from 'vue';
  2. import Table from './index.vue';
  3.  
  4. /* 封装的表格组件 */
  5.  
  6. // 全局注册<Table>组件
  7. Vue.component('CommonTable', Table);

        （4）index.vue文件封装Table组件

        遇到一些自定义列就使用作用域名插槽填充，名称为prop值，并在coloum中配置slot属性。像这样：

  1. <!-- 表格组件 -->
  2. <template>
  3.     <div>
  4.         <el-table :data="data" stripe style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
  5.             <!--选择-->
  6.             <el-table-column v-if="hasSelection" type="selection" width="55" />
  7.             <!--序号-->
  8.             <el-table-column v-if="hasIndex" type="index" width="55" />
  9.             <!--数据源-->
  10.             <template v-for="(column, index) in columns">
  11.                 <!-- 表头存在type类型 -->
  12.                 <el-table-column v-if="
  13.                     column.type &&
  14.                     (column.type == 'selection' || column.type == 'index')
  15.                 " :type="column.type" />
  16.  
  17.                 <!-- 表头是数据或操作内容 -->
  18.                 <el-table-column v-else :label="column.label">
  19.                     <template v-if="!column.type" slot-scope="{ row, $index}">
  20.                         <slot v-if="column.slot" :name="column.slot" :row="row" :index="$index" />
  21.                         <span v-else>{{ row[column.prop] }}</span>
  22.                     </template>
  23.                 </el-table-column>
  24.             </template>
  25.         </el-table>
  26.     </div>
  27. </template>
  28. <script>
  29. export default {
  30.     name: 'Table',
  31.     props: {
  32.         loading: {
  33.             type: Boolean,
  34.             default: () => false
  35.         },
  36.         // 是否可以选择
  37.         hasSelection: {
  38.             type: Boolean,
  39.             default: () => false
  40.         },
  41.         // 是否有序列项
  42.         hasIndex: {
  43.             type: Boolean,
  44.             default: () => false
  45.         },
  46.         // 这是相应的字段展示
  47.         columns: {
  48.             type: Array,
  49.             default: () => []
  50.         },
  51.         // 这是数据源
  52.         data: {
  53.             type: Array,
  54.             default: () => []
  55.         }
  56.     },
  57.     methods: {
  58.         // 将选中的行发送到父组件
  59.         handleSelectionChange(val) {
  60.             const selectionArr = []
  61.             val.forEach(item => {
  62.                 selectionArr.push(item)
  63.             })
  64.             this.$emit('commitSelection', selectionArr)
  65.         },
  66.     },
  67. }
  68. </script>

         （5）main.js中引入全局注册组件

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. import "./assets/css/main.css";
  6.  
  7. /* 全局注册的组件 */
  8. import './components/Table/index'; // 表格组件
  9.  
  10. new Vue({
  11.   router,
  12.   store,
  13.   render: h => h(App)
  14. }).$mount('#app')

  2.2、使用

  1. <template>
  2.     <div>
  3.         <common-table :columns="columns" :data="tableData">
  4.             <template slot="isPublic" slot-scope="{ row }">
  5.                 {{ transformPublic(row.isPublic) }}
  6.             </template>
  7.             <template slot="operation" slot-scope="{ row }">
  8.                 <el-button type="primary">
  9.                     编辑
  10.                 </el-button>
  11.                 <el-button type="danger">
  12.                     删除
  13.                 </el-button>
  14.             </template>
  15.         </common-table>
  16.     </div>
  17. </template>
  18.  
  19. <script>
  20. export default {
  21.     data() {
  22.         return {
  23.             tableData: [{
  24.                 id: 11,
  25.                 name: '绿色天使幼儿园',
  26.                 count: 100,
  27.                 address: '北京',
  28.                 isPublic: 1,
  29.             }, {
  30.                 id: 22,
  31.                 name: '金苹果幼儿园',
  32.                 count: 200,
  33.                 address: '上海',
  34.                 isPublic: 1,
  35.             }, {
  36.                 id: 33,
  37.                 name: '童趣幼儿园',
  38.                 count: 300,
  39.                 address: '广州',
  40.                 isPublic: 0,
  41.             }, {
  42.                 id: 44,
  43.                 name: '快乐星球幼儿园',
  44.                 count: 400,
  45.                 address: '深圳',
  46.                 isPublic: 0,
  47.             }],
  48.             columns: [
  49.                 { prop: 'id', label: 'id' },
  50.                 { prop: 'name', label: '名称' },
  51.                 { prop: 'count', label: '人数' },
  52.                 { prop: 'isPublic', label: '是否公办', slot: 'isPublic' },
  53.                 { prop: 'address', label: '地址' },
  54.                 {
  55.                     label: "操作",
  56.                     slot: "operation"
  57.                 }
  58.             ]
  59.         }
  60.     },
  61.     computed: {
  62.         transformPublic() {
  63.             return function (isPublic) {
  64.                 let t = {
  65.                     1: '是',
  66.                     0: '否'
  67.                 }
  68.                 return t[isPublic]
  69.             }
  70.         }
  71.     }
  72. }
  73. </script>
  74.  
  75. <style scoped></style>

3、jsx方式封装el-table

  3.1、jsx

        我看网上还有使用jsx方式来封装el-table，jsx能够抽象组件，jsx是一种javascript和xml结合的一种语法，它既有javascript的灵活性，也有xml的规范性，但是有一说一，写起来真不习惯、真不舒服！

        babel能将es6转换成es5，还能将jsx转换成javascript，所以babel插件必不可少！惊喜的发现脚手架cli已经配置好babel插件，基本可以直接上手写jsx了！jsx语法和vue语法还是有一些差别的，详细去看看网上例子，掌握好它上手react比较容易！

        写jsx记得要把vue中的template、script、style标签去掉

  3.2、封装

        （1）src/components/JsxTable/index.js 建立文件夹

        （2）render()中 return <div> <el-table></el-table>  </div>

        （3）自定义指令v-loading还有语法糖@selection-change 使用不了，需要转译一下让jsx识别

  1.         // @selection-change语法糖没法在jsx直接使用，需要转译一下
  2.         const listeners = {
  3.             on: {
  4.                 ['selection-change']: val => this.$emit('commitSelection', val)
  5.             }
  6.         };
  7.  
  8.         // v-loading没法在jsx直接使用，需要转译一下
  9.         const directives = {
  10.             directives: [{ name: 'loading', value: loading }]
  11.         };

        （4）attrs和scopedSlots 

        attrs 属性是用于将父组件属性传递（除了 prop 传递的属性、class 和 style ）给子组件, 这通常用于将事件监听器和自定义属性传递给子组件。

        scopedSlots 是用于将父组件的作用域插槽（scoped slot）传递给子组件，以便子组件可以在父组件提供的数据上进行渲染。在父组件中，标签并设置slot-scope属性来创建作用域插槽，然后在子组件中使用this.$slots属性来获取这些插槽

  1.  
  2.         // 渲染列
  3.         const renderColumn = () => {
  4.             return columns.map(item => {
  5.                 const attribute = {
  6.                     attrs: { ...item }
  7.                 };
  8.            
  9.                 if (item.slot) {
  10.                     attribute.scopedSlots = {
  11.                         default: this.$scopedSlots[item.slot]
  12.                     };
  13.                 }
  14.                 return <el-table-column {...attribute} />;
  15.             });
  16.         };

        （5）将属性、事件、指令组装到el-table中，并通过render()返回组装好的el-table

  1.         // 渲染表格
  2.         const renderTable = (
  3.             <el-table data={dataList} {...listeners} {...directives} style="width: 100%" >
  4.                 {renderColumn()}
  5.             </el-table >
  6.         );
  7.         return <div>{renderTable}</div>;

  3.3、使用

  1. <template>
  2.     <div>
  3.         <jsx-table :columns="columns" :dataList="tableData" hasSelection @commitSelection="getselected">
  4.             <template slot="isPublic" slot-scope="{ row }">
  5.                 {{ transformPublic(row.isPublic) }}
  6.             </template>
  7.             <template slot="operation" slot-scope="scope">
  8.                 <el-button type="primary">
  9.                     编辑
  10.                 </el-button>
  11.                 <el-button type="danger">
  12.                     删除
  13.                 </el-button>
  14.             </template>
  15.         </jsx-table>
  16.     </div>
  17. </template>
  18.  
  19. <script>
  20. import JsxTable from '@/components/JsxTable'
  21. export default {
  22.     components: {
  23.         JsxTable
  24.     },
  25.     data() {
  26.         return {
  27.             tableData: [{
  28.                 id: 11,
  29.                 name: '绿色天使幼儿园',
  30.                 count: 100,
  31.                 address: '北京',
  32.                 isPublic: 1,
  33.             }, {
  34.                 id: 22,
  35.                 name: '金苹果幼儿园',
  36.                 count: 200,
  37.                 address: '上海',
  38.                 isPublic: 1,
  39.             }, {
  40.                 id: 33,
  41.                 name: '童趣幼儿园',
  42.                 count: 300,
  43.                 address: '广州',
  44.                 isPublic: 0,
  45.             }, {
  46.                 id: 44,
  47.                 name: '快乐星球幼儿园',
  48.                 count: 400,
  49.                 address: '深圳',
  50.                 isPublic: 0,
  51.             }],
  52.             columns: [
  53.                 { prop: 'id', label: 'id' },
  54.                 { prop: 'name', label: '名称' },
  55.                 { prop: 'count', label: '人数' },
  56.                 { prop: 'isPublic', label: '是否公办', slot: 'isPublic' },
  57.                 { prop: 'address', label: '地址' },
  58.                 {
  59.                     label: "操作",
  60.                     slot: "operation"
  61.                 }
  62.             ]
  63.         }
  64.     },
  65.     methods: {
  66.         // 获取选中行
  67.         getselected(val) {
  68.             console.log('val:', val);
  69.         }
  70.     },
  71.     computed: {
  72.         transformPublic() {
  73.             return function (isPublic) {
  74.                 let t = {
  75.                     1: '是',
  76.                     0: '否'
  77.                 }
  78.                 return t[isPublic]
  79.             }
  80.         }
  81.     }
  82. }
  83. </script>
  84.  
  85. <style scoped></style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/621622
推荐阅读