• vite + vue3 + ts配置《企业级项目》二次封装el-table、分页

     ​前期回顾    ​      

    Vite项目，vite + vue3 + ts + vuex + vue-router + axios + scss + 自动导入api（就是用v3不需要引入api直接使用）_0.活在风浪里的博客-CSDN博客_vue3+vite​webpack回顾 ​ （移动端打包）一步一步,一步 从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包一步一步,一步 从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目) https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%25221656https://blog.csdn.net/m0_57904695/article/details/125487996?spm=1001.2014.3001.5501封装好的源码已上传主页资源

    先介绍、在贴码，

     Element UI的默认语言是英文。那么如何才能将其改成中文呢？

     封装了一个子组件（table、分页），在不同页面引入

    封装的功能有哪些？

     分页、表格排序、文字居中、溢出隐藏、操作列、开关、宽、最小宽、type类型（selection/index/expand）、格式化 、不同页面不同操作列、vuex、vue持久化插件、（此处没有接口所以用到，还涉及了query与params传值区别）

    子组件 

    说思路：data数据请求接口拿到，表头数据一般也是后台接口，如没，前台可自定义自己写

    最简单示例

    1. //lable指定表头名 //prop指定每一项数据 
    2. <el-table  :data="tableData">
    3.    <el-table-column 
    4.     :label="item.label" 
    5.      :prop="item.prop"  
    6.     :key="index" v-for="(item,index) in tableHeader" 
    7.    >
    8.   </el-table-column>
    9. </el-table>
    10.  
    11.  
    12. //表头
    13.  tableHeader:[
    14. 		  {label:'姓名' , prop : 'uname'},
    15. 		  {label:'年龄' , prop : 'age'},
    16. 		  {label:'性别' , prop : 'sex'},
    17. 	    ],
    18. 			    
    19.   //表数据
    20. tableData:[
    21. 			 {uname:"小明",age:'20',sex:'男'}, 
    22.              {uname:"小黑",age:'18',sex:'男'},
    23.           ]
    24. 	
    25.

    类似这样：

     念及此！那开始正文

    子组件

    1. <template>
    2.   <!-- 项目的子组件 封装后的表格、分页 -->
    3.   <!-- 表格数据 Start-->
    4.   <el-table :data="tableData" height="200" style="width: 100%" border>
    5.     <!-- 循环表头 template是不会渲染为dom 在小程序中是block  -->
    6.     <template v-for="(item, index) in tableHeader" :key="index">
    7.       <el-table-column
    8.         :prop="item.prop"
    9.         :label="item.label"
    10.         :align="item.align || 'center'"
    11.         :show-overflow-tooltip="item.overHidden || false"
    12.         :min-width="item.minWidth || '100px'"
    13.         :sortable="item.sortable || false"
    14.         :type="item.type || 'normal'"
    15.         :fixed="item.fixed"
    16.         :width="item.width || ''"
    17.         :formatter="stateFormat"
    18.       >
    19.         <!-- 自定义列 开关-->
    20.         <template #default="scope" v-if="item.dataType==='switch'">
    21.           <el-switch
    22.             v-model="scope.row.status"
    23.             active-text="开"
    24.             inactive-text="关"
    25.             active-color="#13ce66"
    26.             inactive-color="#ff4949"
    27.             @change="changeSwitchStatus(scope.row.id, scope.row.status)"
    28.           />
    29.         </template>
    30.         
    31.         <!-- 自定义列 按钮 -->
    32.         <!-- <template #default="scope" v-if="item.dataType==='operate'">
    33.           <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
    34.           <el-button
    35.             size="small"
    36.             type="danger"
    37.             @click="handleDelete(scope.$index, scope.row)"
    38.           >Delete</el-button>
    39.         </template>-->
    40.       </el-table-column>
    41.     </template>
    42.  
    43.     <!-- 自定义列 按钮 -->
    44.     <el-table-column fixed="right" label="操作列" :width="operateWidth" v-if="isOperate">
    45.       <template #default="scope">
    46.         <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
    47.         <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
    48.       </template>
    49.     </el-table-column>
    50.   </el-table>
    51.   <!-- 表格数据 End-->
    52.  
    53.   <!-- 分页 Start-->
    54.   <el-pagination
    55.     :page-sizes="pageSizesArr"
    56.     :layout="layout"
    57.     :total="total"
    58.     @size-change="handleSizeChange"
    59.     @current-change="handleCurrentChange"
    60.   ></el-pagination>
    61.   <!-- 分页 End-->
    62. </template>

    对子组件属性和自定义解释 

     

     子组件全部代码：

    1. <template>
    2.   <!-- 项目的子组件 封装后的表格、分页 -->
    3.   <!-- 表格数据 Start-->
    4.   <el-table :data="tableData" height="200" style="width: 100%" border>
    5.     <!-- 循环表头 template是不会渲染为dom 在小程序中是block  -->
    6.     <template v-for="(item, index) in tableHeader" :key="index">
    7.       <el-table-column
    8.         :prop="item.prop"
    9.         :label="item.label"
    10.         :align="item.align || 'center'"
    11.         :show-overflow-tooltip="item.overHidden || false"
    12.         :min-width="item.minWidth || '100px'"
    13.         :sortable="item.sortable || false"
    14.         :type="item.type || 'normal'"
    15.         :fixed="item.fixed"
    16.         :width="item.width || ''"
    17.       >
    18.         <!-- 自定义列 开关-->
    19.         <template #default="scope" v-if="item.dataType==='switch'">
    20.           <el-switch
    21.             v-model="scope.row.status"
    22.             active-text="开"
    23.             inactive-text="关"
    24.             active-color="#13ce66"
    25.             inactive-color="#ff4949"
    26.             @change="changeSwitchStatus(scope.row.id, scope.row.status)"
    27.           />
    28.         </template>
    29.         <!-- 加密手机号 -->
    30.         <template #default="scope" v-if="item.dataType==='phone'">{{encryptionPhone(scope.row)}}</template>
    31.         <!-- 自定义列 按钮 -->
    32.         <template #default="scope" v-if="item.dataType==='operate'">
    33.           <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
    34.           <el-button
    35.             size="small"
    36.             type="danger"
    37.             @click="handleDelete(scope.$index, scope.row)"
    38.           >Delete</el-button>
    39.           <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
    40.           <el-button
    41.             size="small"
    42.             type="danger"
    43.             @click="handleDelete(scope.$index, scope.row)"
    44.           >Delete</el-button>
    45.         </template>
    46.       </el-table-column>
    47.     </template>
    48.  
    49.     <!-- 自定义列 按钮 -->
    50.     <el-table-column fixed="right" label="操作列" :width="operateWidth" v-if="isOperate">
    51.       <template #default="scope">
    52.         <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
    53.         <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
    54.       </template>
    55.     </el-table-column>
    56.   </el-table>
    57.   <!-- 表格数据 End-->
    58.  
    59.   <!-- 分页 Start-->
    60.   <el-pagination
    61.     :page-sizes="pageSizesArr"
    62.     :layout="layout"
    63.     :total="total"
    64.     @size-change="handleSizeChange"
    65.     @current-change="handleCurrentChange"
    66.   ></el-pagination>
    67.   <!-- 分页 End-->
    68. </template>
    69.  
    70. <script setup>
    71. import { defineProps, defineEmits, onMounted, reactive } from "vue";
    72.  
    73. const emits = defineEmits([
    74.   "handleSizeChange",
    75.   "handleCurrentChange",
    76.   "handleChangeSwitchStatus",
    77. ]);
    78. // 表格数据格式化
    79. const stateFormat = (row, column, cellValue, index) => {
    80.   // console.log("😂👨🏾‍❤️‍👨🏼==>： ", row.phone);
    81.   // if (cellValue != null) {
    82.   //   const rol = row.phone.slice(0, 3);
    83.   //   const ral = row.phone.slice(7, 12);
    84.   //   const pho = rol + "****" + ral;
    85.   //   return pho;
    86.   // }
    87. };
    88. //开关改变事件
    89. const changeSwitchStatus = (rowId, _boolean) => {
    90.   emits("handleChangeSwitchStatus", rowId, _boolean);
    91. };
    92. // 操作列 编辑
    93. const handleEdit = (index, row) => {
    94.   console.log(" index🚀", index);
    95.   console.log(" row🚀", row);
    96. };
    97. // 操作列 删除
    98. const handleDelete = (index, row) => {
    99.   console.log(" index🚀", index);
    100.   console.log(" row🚀", row);
    101. };
    102.  
    103. // 页数改变的时候触发的事件
    104. const handleSizeChange = (val) => {
    105.   emits("handleSizeChange", val);
    106. };
    107. // 当前页改变的时候触发的事件
    108. const handleCurrentChange = (val) => {
    109.   emits("handleCurrentChange", val);
    110. };
    111. // 手机号格式化
    112. const encryptionPhone = (row) => {
    113.   // console.log(row);
    114.   let phone = row.phone;
    115.   if (phone != null) {
    116.     const rol = phone.slice(0, 3);//用于截取数组，并返回截取到的新的数组，数组与字符串对象都使用(⚠️：对原数组不会改变)
    117.     const ral = phone.slice(7, 12);
    118.     const pho = rol + "****" + ral;
    119.     return pho;
    120.   }
    121. };
    122. const props = defineProps({
    123.   // 表格显示的数据
    124.   tableData: {
    125.     type: Array,
    126.     default: function () {
    127.       return [];
    128.     },
    129.   },
    130.   // 表头数据
    131.   tableHeader: {
    132.     type: Array,
    133.     default: function () {
    134.       return [];
    135.     },
    136.   },
    137.   // 控制操作列是否显示
    138.   isOperate: {
    139.     type: Boolean,
    140.     default: function () {
    141.       return false;
    142.     },
    143.   },
    144.   operateWidth: {
    145.     type: Number,
    146.     default: () => 200,
    147.   },
    148.   // 总页数
    149.   total: {
    150.     type: Number,
    151.     // 必传类型
    152.     required: true,
    153.     default: 0,
    154.   },
    155.  
    156.   // 分页的页容量数组
    157.   pageSizesArr: {
    158.     type: Array,
    159.     default() {
    160.       return [10, 20, 30, 50];
    161.     },
    162.   },
    163.   // 分页的布局
    164.   layout: {
    165.     type: String,
    166.     default: "total, sizes, prev, pager, next, jumper",
    167.   },
    168. });
    169.  
    170. onMounted(() => {
    171.   // console.log("！这里输出😂👨🏾‍❤️‍👨🏼==>： ", props.tableData);
    172.   // console.log("表格🚀", props.tableData, props.tableHeader, props.isOperate);
    173.   // console.log("页容量🚀", props.total);
    174. });
    175. </script>
    176.  
    177. <style lang="scss">
    178. * {
    179.   margin: 0;
    180.   padding: 0;
    181. }
    182. .el-switch__label--left {
    183.   position: relative;
    184.   left: 45px;
    185.   color: #fff;
    186.   z-index: -1111;
    187. }
    188.  
    189. .el-switch__core {
    190.   width: 50px !important;
    191. }
    192.  
    193. .el-switch__label--right {
    194.   position: relative;
    195.   right: 46px;
    196.   color: #fff;
    197.   z-index: -1111;
    198. }
    199.  
    200. .el-switch__label--right.is-active {
    201.   z-index: 1111;
    202.   color: #fff !important;
    203. }
    204.  
    205. .el-switch__label--left.is-active {
    206.   z-index: 1111;
    207.   color: #fff !important;
    208. }
    209. </style>

    home页面：

    1. <template>
    2.   <h1 style="color:green; text-align: center;">这里是home父组件 , 他们调用一个子组件</h1>
    3.   <!-- query  刷新页面,地址栏参数不保存,地址栏不可见 必须在router.ts配置name -->
    4.  
    5.   <el-button
    6.     type="primary"
    7.     @click="$router.push({path:'/about',query:{id:666}})"
    8.   >{{$route.params.id}}----跳转 about</el-button>
    9.   <!-- 子组件 Start -->
    10.   <comm-table-pagination
    11.     :tableData="tableData"
    12.     :tableHeader="tableHeader"
    13.     :isOperate="isOperate"
    14.     :total="total"
    15.     :operateWidth="operateWidth"
    16.     @handleSizeChange="onHandleSizeChange"
    17.     @handleCurrentChange="onHandleCurrentChange"
    18.   >
    19.     <template v-slot:btn>
    20.       <el-button type="success" size="small" @click="$router.push('/about')">跳转 about页面</el-button>
    21.       <el-button link type="success" size="small">Edit</el-button>
    22.       <el-button link type="success" size="small">Edit</el-button>
    23.       <el-button link type="success" size="small">Edit</el-button>
    24.       <el-button link type="success" size="small">Edit</el-button>
    25.     </template>
    26.   </comm-table-pagination>
    27.   <!-- 子组件 End -->
    28. </template>
    29.  
    30. <script setup>
    31. import commTablePagination from "@/components/commTable.vue";
    32. import { reactive, ref, onMounted } from "vue";
    33.  
    34. // 表格所需的数据
    35. const tableData = reactive([
    36.   {
    37.     id: 1,
    38.     title: "我是title活在风浪里我是title活在风浪里",
    39.     status: "启动",
    40.     docAuthor: "zhangshan",
    41.     submitTime: "2020-06-06 23:58:49",
    42.   },
    43.   {
    44.     id: 2,
    45.     title: "我是title活在风浪里我是title活在风浪里",
    46.     status: "禁用",
    47.     docAuthor: "zhangshan",
    48.     submitTime: "2020-06-07 00:10:59",
    49.   },
    50.   {
    51.     title: "我是title活在风浪里我是title活在风浪里",
    52.     status: "启动",
    53.     docAuthor: "zhangshan",
    54.     submitTime: "2020-06-11 08:07:26",
    55.   },
    56.   {
    57.     title: "我是title活在风浪里我是title活在风浪里",
    58.     status: "启动",
    59.     docAuthor: "zhangshan",
    60.     submitTime: "2020-06-11 08:07:26",
    61.   },
    62.   {
    63.     title: "我是title活在风浪里我是title活在风浪里",
    64.     status: "启动",
    65.     docAuthor: "zhangshan",
    66.     submitTime: "2020-06-11 08:07:26",
    67.   },
    68.   {
    69.     title: "我是title活在风浪里我是title活在风浪里",
    70.     status: "启动",
    71.     docAuthor: "zhangshan",
    72.     submitTime: "2020-06-11 08:07:26",
    73.   },
    74. ]);
    75. // 表头数据  辅助tableData的数据 这里是自己定义
    76.  
    77. const tableHeader = reactive([
    78.   {
    79.     type: "index",
    80.     label: "#",
    81.     fixed: true,
    82.     width: "60px", // 宽度 不指定会 自适应屏幕铺满
    83.   },
    84.   {
    85.     prop: "title",
    86.     label: "稿件名称",
    87.     overHidden: true, // 超出显示省略号 比如某一行字数多，缩小屏幕就省略号显示
    88.     sortable: true,
    89.   },
    90.   {
    91.     prop: "status",
    92.     label: "稿件状态",
    93.     sortable: true,
    94.   },
    95.   {
    96.     prop: "docAuthor",
    97.     label: "作者",
    98.   },
    99.   {
    100.     prop: "submitTime",
    101.     label: "提交日期",
    102.     sortable: true, // 是否可排序
    103.     align: "left", // 对齐方式
    104.     width: "120px", // 最小宽度
    105.     width: "200px",
    106.   },
    107. ]);
    108. const operateWidth = ref(160); // 操作列宽度
    109. const isOperate = ref(true); // 操作列是否显示
    110. const pageSize = ref(10); // 每页显示条数
    111. const pageNum = ref(2); // 当前页码
    112. const total = ref(100); // 总条数
    113. // 分页改变事件
    114. const onHandleSizeChange = (val) => {
    115.   pageSize.value = val;
    116.   // getData(); 以上数据来自接口，这里是模拟数据，如果是真实数据页数变了，需要再次调用请求后台的接口，重新刷新页面
    117. };
    118. // 当前页改变事件
    119. const onHandleCurrentChange = (val) => {
    120.   pageNum.value = val;
    121.   // getData(); 以上数据来自接口，这里是模拟数据，如果是真实数据页数变了，需要再次调用请求后台的接口，重新刷新页面
    122. };
    123. </script>

    about页面：

    1. <template>
    2.   <h1 style="color:red; text-align: center;">这里是about 父组件 , 他们调用一个子组件</h1>
    3.   <!-- params 刷新页面,地址栏参数不保存,不可见  必须在router.ts设置name-->
    4.   <el-button
    5.     type="primary"
    6.     @click="$router.push({ name: 'home', params: {id:'1'}}) "
    7.   >{{$route.query.id}}----跳转 home</el-button>
    8.  
    9.   <p>{{ $store.state.count }}</p>
    10.   <el-button type="primary" @click="add">点击++</el-button>
    11.   <!-- 子组件 Start -->
    12.   <comm-table-pagination
    13.     :tableData="$store.state.tableData"
    14.     :tableHeader="tableHeader"
    15.     :isOperate="isOperate"
    16.     :total="total"
    17.     :operateWidth="operateWidth"
    18.     @handleSizeChange="onHandleSizeChange"
    19.     @handleChangeSwitchStatus="onHandleChangeSwitchStatus"
    20.   ></comm-table-pagination>
    21.   <!-- 子组件 End -->
    22. </template>
    23.  
    24. <script setup>
    25. import commTablePagination from "@/components/commTable.vue";
    26. import { reactive, ref, onMounted } from "vue";
    27. import { useStore } from "vuex";
    28.  
    29. let store = useStore();
    30.  
    31. // 表格所需的数据
    32. let tableData = reactive([
    33.   {
    34.     id: 1,
    35.     title: "我是title活在风浪里我是title活在风浪里",
    36.     status: true,
    37.     docAuthor: "zhangshan",
    38.     submitTime: "2020-06-06 23:58:49",
    39.     phone: "11288888888",
    40.   },
    41.   {
    42.     id: 2,
    43.     title: "我是title活在风浪里我是title活在风浪里",
    44.     status: true,
    45.     docAuthor: "zhangshan",
    46.     submitTime: "2020-06-07 00:10:59",
    47.     phone: "15888888888",
    48.   },
    49.   {
    50.     id: 3,
    51.     title: "我是title活在风浪里我是title活在风浪里",
    52.     status: false,
    53.     docAuthor: "zhangshan",
    54.     submitTime: "2020-06-11 08:07:26",
    55.     phone: "16588888888",
    56.   },
    57.   {
    58.     id: 4,
    59.     title: "我是title活在风浪里我是title活在风浪里",
    60.     status: true,
    61.     docAuthor: "zhangshan",
    62.     submitTime: "2020-06-11 08:07:26",
    63.     phone: "18588888888",
    64.   },
    65.   {
    66.     id: 5,
    67.     title: "我是title活在风浪里我是title活在风浪里",
    68.     status: false,
    69.     docAuthor: "zhangshan",
    70.     submitTime: "2020-06-11 08:07:26",
    71.     phone: "16988888888",
    72.   },
    73.   {
    74.     id: 6,
    75.     title: "我是title活在风浪里我是title活在风浪里",
    76.     status: false,
    77.     docAuthor: "zhangshan",
    78.     submitTime: "2020-06-11 08:07:26",
    79.     phone: "17688888888",
    80.   },
    81. ]);
    82. // 表头数据  辅助tableData的数据 这里是自己定义
    83.  
    84. let tableHeader = reactive([
    85.   {
    86.     type: "index",
    87.     label: "#",
    88.     fixed: true,
    89.     width: "60px", // 宽度 不指定会 自适应屏幕铺满
    90.   },
    91.   {
    92.     prop: "title",
    93.     label: "稿件名称",
    94.     overHidden: true, // 超出显示省略号 比如某一行字数多，缩小屏幕就省略号显示
    95.     sortable: true,
    96.   },
    97.   {
    98.     prop: "status",
    99.     label: "稿件状态",
    100.     dataType: "switch", // 自定义列类型
    101.   },
    102.   {
    103.     prop: "docAuthor",
    104.     label: "作者",
    105.   },
    106.   {
    107.     prop: "submitTime",
    108.     label: "提交日期",
    109.     sortable: true, // 是否可排序
    110.     align: "left", // 对齐方式
    111.     minWidth: "120px", // 最小宽度
    112.     width: "200px",
    113.   },
    114.   {
    115.     prop: "phone",
    116.     label: "手机号",
    117.     dataType: "phone", // 自定义列类型
    118.   },
    119.   {
    120.     label: "操作",
    121.     sortable: true, // 是否可排序
    122.     minWidth: "120px", // 最小宽度
    123.     width: "300px",
    124.     dataType: "operate", // 自定义列类型 在子组件判断如果是operate就显示操作按钮
    125.     fixed: "right", // 固定列
    126.   },
    127. ]);
    128. let operateWidth = ref(300); // 操作列宽度
    129. let isOperate = ref(false); // 操作列是否显示 这个页面用的操作列第二种方式 指定数据，在循环中添加，关闭默认操作列isOperate
    130. let pageSize = ref(10); // 每页显示条数
    131. let pageNum = ref(2); // 当前页码
    132. let total = ref(100); // 总条数
    133.  
    134. // 分页改变事件
    135. const onHandleSizeChange = (val) => {
    136.   pageSize.value = val;
    137.   // getData(); 以上数据来自接口，这里是模拟数据，如果是真实数据页数变了，需要再次调用请求后台的接口，重新刷新页面
    138. };
    139. // 当前页改变事件
    140. const onHandleCurrentChange = (val) => {
    141.   pageNum.value = val;
    142.   // getData(); 以上数据来自接口，这里是模拟数据，如果是真实数据页数变了，需要再次调用请求后台的接口，重新刷新页面
    143. };
    144. //
    145. const onHandleChangeSwitchStatus = (rowId, parameter) => {
    146.   tableData.map((v) => {
    147.     if (v.id === rowId) {
    148.       v.status = parameter;
    149.     }
    150.   });
    151.   store.commit("setTableData", tableData);
    152. };
    153. function add() {
    154.   store.commit("increment");
    155. }
    156. onMounted(() => {
    157.   if (localStorage.getItem("vuex")) {
    158.     store.commit(
    159.       "setTableData",
    160.       JSON.parse(localStorage.getItem("vuex")).tableData
    161.     );
    162.   } else {
    163.     store.commit("setTableData", tableData);
    164.   }
    165. });
    166. </script>

    到此基本已经可以了，可根据实际变化，在变动一下

     

     

    结语：

    祝大家2022愈来愈强！ 

  • 相关阅读:
    【算法面试必刷Java版十】两个链表的第一个公共结点
    java毕业设计木材产销系统的生产管理模块mybatis+源码+调试部署+系统+数据库+lw
    智慧经营| 物业数字化管理系统
    spacy教程（持续更新ing...）
    FreeRTOS 延时函数和软件定时器 详解
    vue：功能：table动态合并+前端导出
    内外通、效益增 | 数商云•瓴犀产品3.0开启全方位精准精细化协同模式
    第三章-内存管理
    图片转excel表格怎么弄？有何密笈？
    剑指offer——JZ25 合并两个排序的链表 解题思路与具体代码【C++】
  • 原文地址：https://blog.csdn.net/m0_57904695/article/details/125613767