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

el-table 表格封装并改造实现单元格可编辑_el-table 编辑单元格

作者：正经夜光杯 | 2024-08-11 16:58:56

赞

踩

el-table 编辑单元格

说明

在使用 element ui 表格组件的时候频繁的引用，相同的业务代码反复，所以萌生了要简易封装一下的想法，做项目的过程中又有了表格单元格可编辑的需求，因此总结记录一下实现过程。

实现

一、el-table表格封装成公共组件

1.创建表格主体（也是即将抽离成公共组件）文件：listEdit.vue (文件名随意)

template部分

  1. <template>
  2.  
  3.   <el-table
  4.     ref="listEdit"
  5.     :data="tableData"
  6.   >
  7.     <!-- fixed:列是否固定在左侧或者右侧，true 表示固定在左侧;show-overflow-tooltip: 当内容过长被隐藏时显示 tooltip -->
  8.     <el-table-column fixed type="index" width="45" label="序号" show-overflow-tooltip/>
  9.     <!-- 这里用插槽来写表格列，为了方便在调用组件的时候更方便自定义表格列 -->
  10.     <slot name="column">
  11.       <!-- sortable:排序  -->
  12.       <el-table-column v-for="(item,index) of columnList" :key="index" :prop="item.prop" :label="item.label" sortable show-overflow-tooltip/>
  13.     </slot>
  14.   </el-table>
  15.  
  16. </template>

 script部分

  1. <script>
  2. export default {
  3.   name: "ListEdit",
  4.   props: {
  5.     tableData: {
  6.       type: Array,default:() => []
  7.     },
  8.     columnList: {
  9.       type: Array,default:() => []
  10.     },
  11.   }
  12. }
  13. </script>

基础文件准备完毕 ，接下来对表格功能进一步完善。

2.表格改造

①给表格增加上一些属性设置

height：Table 的高度

highlight-current-row：高亮当前行

border：是否带有纵向边框

header-cell-style：表头单元格样式

cell-style：单元格的 style 的回调方法

row-class-name：行的 className 的回调方法

row-style：行的 style 的回调方法

②给表格增加上一些事件方法

@row-click="rowClick" // 行单击事件

@selection-change="handleSelectionChange" // 选择事件

  1. <template>
  2.  
  3.   <el-table
  4.     ref="listEdit"
  5.     :data="tableData"
  6.     highlight-current-row
  7.     border
  8.     :height="tableHeight"
  9.     style="width:100%"
  10.     :header-cell-style="{
  11.       color: '#333',
  12.       background: '#f8f8f9',
  13.       padding: '0px',
  14.       fontSize: '12px',
  15.     }"
  16.     :cell-style="{ padding: '0px', height: '22px', cursor: 'pointer' }"
  17.     :row-class-name="rowClassName"
  18.     :row-style="rowStyle"
  19.     @row-click="rowClick"
  20.     @selection-change="handleSelectionChange"
  21.   >
  22.     <!-- fixed:列是否固定在左侧或者右侧，true 表示固定在左侧；show-overflow-tooltip: 当内容过长被隐藏时显示 tooltip -->
  23.     <el-table-column fixed type="index" width="45" label="序号" show-overflow-tooltip/>
  24.     <!-- 这里用插槽来写表格列，为了方便在调用组件的时候更方便自定义表格列 -->
  25.     <slot name="column">
  26.       <!-- sortable:排序  -->
  27.       <el-table-column v-for="(item,index) of columnList" :key="index" :prop="item.prop" :label="item.label" sortable show-overflow-tooltip/>
  28.     </slot>
  29.   </el-table>
  30.  
  31. </template>
  1. <script>
  2. export default {
  3.   name: "ListEdit",
  4.   props: {
  5.     tableHeight: {
  6.       type: Number,default: () => 300
  7.     },
  8.     tableData: {
  9.       type: Array,default:() => []
  10.     },
  11.     columnList: {
  12.       type: Array,default:() => []
  13.     },
  14.   },
  15.   methods: {
  16.     
  17.     rowClassName({}){ // 行class
  18.       const className = 'resetClass'
  19.       return className
  20.     },
  21.  
  22.     rowStyle({ row, rowIndex}){ // 行样式
  23.       const styleJson = {}
  24.       // console.log('设置行样式的当前行：',row);
  25.       if (row.isExist === '1') { // 根据当前行的属性来判断，并设置当前行样式
  26.         styleJson.color = '#BCBEC2'
  27.         styleJson.background = '#F4F4F5'
  28.         return styleJson
  29.       } else {
  30.         
  31.         return ''
  32.       }
  33.     },
  34.  
  35.     rowClick(row) { // 行单击事件
  36.       this.$emit("callBackFun", {
  37.         type: 'rowClick',
  38.         data: row
  39.       })
  40.     },
  41.     
  42.     handleSelectionChange(val) { // 行选 change 事件
  43.       this.$emit("callBackFun", {
  44.         type: 'select',
  45.         data: val
  46.       })
  47.     },
  48.  
  49.     unSelected() {
  50.       this.$refs.listEdit.setCurrentRow() // setCurrentRow() 设定某行为选中行，不加参数则取消目前高亮行的选中状态
  51.     },
  52.   },
  53. }
  54. </script>
 ③给表格增加样式控制
  1. <style lang="scss" scoped>
  2.  
  3.   // 鼠标移入高亮
  4.   ::v-deep .el-table__body tr.hover-row>td {
  5.     background-color: #fff2e0 !important;
  6.     // color: #fff;
  7.   }
  8.  
  9.   // 表格点击高亮
  10.   ::v-deep .el-table__body tr.current-row>td {
  11.     background-color: #FBD9A7 !important;
  12.     // color: #fff;
  13.   }
  14.   // -----------------------------------------------------------------------------------------
  15.   /**
  16.   可以使用CSS的text-overflow属性来实现表格超出部分省略号显示，并且鼠标移入完整显示的效果
  17.   1.首先，在表格的样式中添加以下CSS样式
  18.   2.然后，在表格的列定义中，添加show-overflow-tooltip属性，用于鼠标移入时显示完整内容的提示： 
  19.   */
  20.   ::v-deep .el-table__body-wrapper .cell {
  21.     white-space: nowrap;
  22.     overflow: hidden;
  23.     text-overflow: ellipsis;
  24.     height: 100%;
  25.   }
  26.   
  27.   ::v-deep .el-table__body-wrapper .cell:hover {
  28.     overflow: visible;
  29.     white-space: normal;
  30.   }
  31.   // -----------------------------------------------------------------------------------------
  32.  
  33. </style>

至此表格组件封装完毕。

二、组件使用

1.引入

import ListEdit from "@/components/BC-wheelH/zdy-table/elbox/listEdit.vue";

2.声明

  1.   components: {
  2.     ListEdit
  3.   },

3.使用

 template

  1. <ListEdit
  2.   :tableHeight="tableHeight"
  3.   :tableData="tableData"
  4.   @callBackFun="callBackFun"
  5. >
  6.   <!-- 这里使用插槽 v-slot 的值 一定要和组件中 slot 标签 name 属性值相对应 -->
  7.   <template v-slot:column>
  8.     <el-table-column fixed type="selection" width="45" show-overflow-tooltip/> 
  9.   </template>
  10. </ListEdit>

script

  1. <script>
  2. import ListEdit from "@/components/BC-wheelH/zdy-table/elbox/listEdit.vue";
  3. export default {
  4.   components: {
  5.     ListEdit
  6.   },
  7.   data() {
  8.     return {
  9.       tableHeight: 600,
  10.       tableData: [],
  11.     };
  12.   },
  13.   methods: {
  14.     callBackFun(val){
  15.       switch (val.type) {
  16.         case 'rowClick': // 行单击事件
  17.           
  18.         break;
  19.         case 'select': // 行选 change 事件
  20.           
  21.         break;
  22.         default:
  23.         break;
  24.       }
  25.     }
  26.   },
  27. };
  28. </script>

4. 优化

表格的高度height值不方便设置一个固定值所以：

①在组件外包裹一层标签盒子
  1. <div resf="mainBox" style="height:100%">
  2.   <ListEdit
  3. 	:tableHeight="tableHeight"
  4.   />
  5. </div>
②组件盒子高度值设100%再获取标签盒子的高度传值进组件，这样盒子标签是什么高度表格就是什么高度
  1. // 获取主体高度（传值给表格撑起高度）
  2. this.tableHeight = this.$refs.mainBox.clientHeight

三、实现单元格可编辑

1.思路

想实现能编辑输入，首先就想到了表单，所以实现方法就时在表格列写插槽 input 来承载键盘的输入

2.实现

template 部分

  1. <ListEdit
  2.   :tableHeight="tableHeight"
  3.   :tableData="tableData"
  4. >
  5.   <template v-slot:column>
  6.     <el-table-column prop="lengthValue" label="余量长度（mm）" width="120" show-overflow-tooltip>
  7.       <template slot-scope="scope">
  8.         <!-- class 动态绑定 bgf 根据 lengthValueTF 的值来判断 lengthValue 的值合不合理 -->
  9.         <input :class="{'bgf': !scope.row.lengthValueTF}" v-model="scope.row.lengthValue" size="mini" @blur="inputBlur(scope,scope.row.lengthValue)" style="width:100%;height:100%;border:none !important;background:#FBD9A7;outline:none" />
  10.       </template>
  11.     </el-table-column>
  12.   </template>
  13. </ListEdit>

 script 部分

  1. <script>
  2. export default {
  3.  
  4.   data() {
  5.     return {
  6.       tableData: [
  7.         { lengthValue:100,lengthValueTF:false }
  8.       ],
  9.     };
  10.   },
  11.   methods: {
  12.     inputBlur(val,value){
  13.       // console.log(val);      
  14.     },
  15.   },
  16. };
  17. </script>

 style 部分

  1. .bgf{
  2.   background-color: red !important;
  3.   color: #ffffff;
  4. }

 3.优化

用到表单了就需要校验，所以要与之配套的加入校验方法

①新建 check.js 文件封装校验方法

  1. function checkFun(check,value,callback){ // 校验函数
  2.   // console.log(check,value,callback);
  3.   if (check === 'integer0+') {
  4.     let reg = /^([1-9]\d*|[0]{1,1})$/; // 正整数（包含0）
  5.     // console.log(!reg.test(value));
  6.     if (!reg.test(value)) {
  7.       // console.log('假');
  8.       callback(new Error('请输入正整数'))
  9.     } else {
  10.       // console.log('真');
  11.       callback()
  12.     }
  13.   }
  14.   if (check === 'integer+') {
  15.     let reg = /^([1-9][0-9]*)$/; // 正整数
  16.     // console.log(!reg.test(value));
  17.     if (!reg.test(value)) {
  18.       // console.log('假');
  19.       callback(new Error('请输入正整数'))
  20.     } else {
  21.       // console.log('真');
  22.       callback()
  23.     }
  24.   }
  25.   if (check === 'nonempty') {
  26.     if (value === '' || value == null || value == undefined) {
  27.       callback(new Error('不能为空'));
  28.     } else {
  29.       callback();
  30.     }
  31.   }
  32. }
  33. export default {
  34.   checkFun
  35. };

②引入校验方法，并且在input回调方法里对输入进行校验

  1. <script>
  2. import check from "@/components/BC-wheelH/function/check.js"
  3. export default {
  4.  
  5.   data() {
  6.     return {
  7.       tableData: [
  8.         { lengthValue:100,lengthValueTF:false }
  9.       ],
  10.     };
  11.   },
  12.   methods: {
  13.     inputBlur(val,value){
  14.       // console.log(val);
  15.       
  16.       check.checkFun('integer0+',value,(err) => {
  17.         if (err) { // 校验报错
  18.           // 单元格加状态来提示当前此数据不合格
  19.           // console.log(err.message);
  20.           this.$message.error('第 ' + (val.$index+1) + ' 行请输入正整数');
  21.           if (val.column.property === "lengthValue") {
  22.             // 改变校验结果标识
  23.             this.tableData[val.$index].lengthValue= false
  24.           }
  25.         } else { 
  26.           if (val.column.property === "margin") {
  27.             // 改变校验结果标识
  28.             this.tableData[val.$index].lengthValue= true
  29.           }
  30.           // console.log('输入有效');
  31.  
  32.         }
  33.       } )
  34.       
  35.     },
  36.   },
  37. };
  38. </script>

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

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

  

闽ICP备14008679号