• 实现表格表头自定义编辑、一键导入、增加列

     1.前言

    本文基于vue2及elementUI的表格组件

     

    2.效果及功能展示 

     

     3.需求背景

    有时候客户急需看到需求实现的页面，而此时后端接口没有，产品原型没有，只能前端出马，画一个静态页面，来展示客户想要的东西，如果是通过F12来改很慢，于是就有了这篇文章，使用它可以轻松的对表格的任何地方进行修改，且可以增加减少行或者列，它完全是由数据控制的，而在此基础上，还支持一键导入的功能，可以不用一个一个的编辑，直接一步到位。

    4.技术实现

    4.1 表格编辑

    要说明的是，我使用的elementUI的表格组件，针对表格他们提供了一些事件，比如 点击表头事件：

    说白了，其实就是将框架提供给我们的事件回调函数中有用的部分，对表头数据进行修改即可

    4.2 表格增加列

    在事件回调中，对数据进行push操作

    4.3 一键导入

    思路是 使用input标签的file文件上传功能（原生的标签过于丑陋，我给隐藏了，使用好看的按钮触发input的click事件即可） ，然后将导入的文件读取，并保存到变量中，转为数组。

    我是在文件中放了两个数组，上面是表头，下面是表格数据。

    我准备的数据源及格式如下：

     

    5.核心代码展示

    1.  
    2. <template>
    3.    <div>
    4.         <div class="main-title" @click="$refs.fileInput.click()" >xxx库div>
    5.         <input ref="fileInput" style="display:none" type="file" id="data2"                         
    6.         @change="upload()">
    7.         <div class="tollboxlist context_box_bg">
    8.             <div class="search-box">
    9.                
    10.                 
    11.   <el-table :data="tableData" style="width: 98%;align: center" @cell-click="tsetClick" @header-click="headerTest">
    12.     <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList" :key="item.prop" align="center">
    13.       <template slot-scope="scope">
    14.         <span @click="getIndex(scope.$index)">{{scope.row[scope.column.property]}}span>
    15.       template>
    16.     el-table-column>
    17.     <el-table-column label="." width="20" prop="addTableHeaderName" align="center"/>
    18.   el-table>
    19.     <el-dialog :visible.sync="dialogForHeader" title="修改项目流程名称" width="800">
    20.       <el-form ref="form" :model="tableHeader" label-width="80px">
    21.         <el-form-item label="表头名称">
    22.           <el-input v-model="tableHeader.tableHeaderName" placeholder="请输入表头名称" />
    23.         el-form-item>
    24.       el-form>
    25.       <div slot="footer" class="dialog-footer">
    26.         <el-button type="primary" @click="submitForm">确 定el-button>
    27.         <el-button @click="cancel">取 消el-button>
    28.       div>
    29.     el-dialog>
    30.  
    31.     <el-dialog :visible.sync="dialogForTable" title="修改项目流程内容" width="800">
    32.       <el-form ref="form" :model="tableCell" label-width="120px">
    33.         <el-form-item label="流程内容名称">
    34.           <el-input v-model="tableCell.tableCellData" placeholder="流程内容名称" />
    35.         el-form-item>
    36.       el-form>
    37.       <div slot="footer" class="dialog-footer">
    38.         <el-button type="primary" @click="submitForm1">确 定el-button>
    39.         <el-button @click="cancel1">取 消el-button>
    40.       div>
    41.     el-dialog>
    42.  
    43.                 <el-pagination
    44.                     :page-size="page_size" 
    45.                     background
    46.                     layout="total,  prev, pager, next, sizes,jumper"
    47.                     :total="total"
    48.                     :current-page="page"
    49.                     @size-change="handleSizeChange"
    50.                     @current-change="handleCurrentChange"
    51.                     >
    52.                 el-pagination> 
    53.             div>
    54.         div>
    55.         <el-dialog class="zidiandia" title="新建字典" :visible.sync="createDictionaries" v-if="createDictionaries"  :before-close="cancelform" width='1184px' :close-on-click-modal="false" :show-close="false">
    56.             <div class="dialog_b_btn">  
    57.                 <el-button size="small" @click="handleCreateSave">保存el-button>
    58.                 <el-button size="small" @click="handleSaveCancel">取消el-button>
    59.             div>
    60.             <Edit
    61.                 :exhibitionList="exhibitionList"
    62.                 :serviceType="serviceType"
    63.                 :dictionariesType="dictionariesType"
    64.                 :pageType = "pageType"
    65.                 ref="createEditRef"
    66.             >Edit>
    67.         el-dialog>
    68.  
    69.          <el-dialog title="详情"  :visible.sync="editDictionaries"  :before-close="cancelform" width='1184px' :close-on-click-modal="false" :show-close="false">
    70.             <div class="dialog_b_btn">  
    71.                 <el-button size="small" @click="handleClickEdit" v-if="isUpdate">编辑el-button>
    72.                 <el-button size="small" v-else >编辑中el-button>
    73.                 <el-button size="small" @click="handleEditSave" v-if="!isUpdate">保存el-button>
    74.                 <el-button size="small" @click="handleEditCancel">取消el-button>
    75.             div>
    76.             <Edit
    77.                 v-if="editShow"
    78.                 :show="isUpdate"
    79.                 :exhibitionList="exhibitionList"
    80.                 :serviceType="serviceType"
    81.                 :dictionariesType="dictionariesType"
    82.                 :editData="editData"
    83.                 :pageType = "pageType"
    84.                 ref="cancelEditRef"
    85.             >Edit>
    86.         el-dialog>
    87.     div>
    89.  
    90. template>
    91.  
    92. <script>
    93.  
    94.   export default {
    95.     data() {
    96.       return {
    97.       
    98.      
    99.       
    100.         // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据  你要用的话可以调用后台接口 
    101.        获取tableColumnList，注意数据格式
    102.         tableColumnList:
    103.           [
    104.           {prop: '0', propName: '编号8888'},
    105.           {prop: '2', propName: '名字'},
    106.           {prop: '3', propName: '保质期'},
    107.           {prop: '4', propName: '特点1'},
    108.           
    109.           ],
    110.  
    111.         tableData: [{
    112.           0: '2016-05-01',
    113.           2: '王小虎1',
    114.           3: '上海市普陀区金沙江路 1518 弄',
    115.           4: '2016-05-02',
    116.         
    117.         }, {
    118.           0: '2016-05-02',
    119.           2: '王小虎2',
    120.           3: '上海市普陀区金沙江路 1518 弄',
    121.           4: '2016-05-02',
    122.          
    123.         }, {
    124.           0: '2016-05-03',
    125.           2: '王小虎3',
    126.           3: '上海市普陀区金沙江路 1518 弄',
    127.           4: '2016-05-02',
    128.          
    129.         }, {
    130.           0: '2016-05-04',
    131.           2: '王小虎4',
    132.           3: '上海市普陀区金沙江路 1518 弄',
    133.           4: '2016-05-02',
    134.       
    135.         }, {
    136.           0: '2016-05-05',
    137.           2: '王小虎5',
    138.           3: '上海市普陀区金沙江路 1518 弄',
    139.           4: '2016-05-06',
    140.         
    141.         }, 
    142.         {
    143.           0: '2016-05-07',
    144.           2: '王小虎6',
    145.           3: '上海市普陀区金沙江路 1518 弄',
    146.           4: '2016-05-02',
    147.         
    148.         },
    149.         {
    150.           0: '2016-05-07',
    151.           2: '王小虎6',
    152.           3: '上海市普陀区金沙江路 1518 弄',
    153.           4: '2016-05-02',
    154.         
    155.         },
    156.         {
    157.           0: '2016-05-07',
    158.           2: '王小虎6',
    159.           3: '上海市普陀区金沙江路 1518 弄',
    160.           4: '2016-05-02',
    161.         
    162.         },
    163.         {
    164.           0: '2016-05-07',
    165.           2: '王小虎6',
    166.           3: '上海市普陀区金沙江路 1518 弄',
    167.           4: '2016-05-02',
    168.         
    169.         },
    170.         {
    171.           0: '2016-05-07',
    172.           2: '王小虎6',
    173.           3: '上海市普陀区金沙江路 1518 弄',
    174.           4: '2016-05-02',
    175.         
    176.         }
    177.         ],
    178.       }
    179.     },
    180.     methods: {
    181.   
    182.       upload(e){
    183.         let that = this;
    184.         console.log("点击了上传按钮");
    185.         let da = window.event || e  // change事件获取到的数据
    186.             var file = da.target.files[0]
    187.             console.log(file, 'file===');
    188.             if (true) {
    189.               var reader = new FileReader()
    190.               reader.readAsText(file, "utf-8")//gbk编码 还有其他方式比如gpk
    191.               reader.onload = function (da) {
    192.                console.log(da.target.result, 'da',Object.prototype.toString.call(da.target.result));
    193.                //查找字符串中第三个‘[’并截取，分别保存到str1和str2中
    194.             let str1 = "";
    195.             let str2 = "";
    196.                 var str = da.target.result;
    197.  
    198.                 // 计数器，用于记录'['的出现次数
    199.                 var count = 0;
    200.  
    201.                 // 保存第三个'['字符的索引
    202.                 var startIndex = -1;
    203.  
    204.                 // 遍历字符串
    205.                 for (var i = 0; i < str.length; i++) {
    206.                   // 如果找到了第2个'['字符
    207.                   if (str[i] === '[') {
    208.                     // 计数器加1
    209.                     count++;
    210.                     // 如果计数器为3，则保存索引并跳出循环
    211.                     if (count === 2) {
    212.                       startIndex = i;
    213.                       break;
    214.                     }
    215.                   }
    216.                 }
    217.  
    218.                 // 如果找到了第三个'['字符
    219.                 if (startIndex !== -1) {
    220.                   // 使用字符串的截取函数substring将第三个'['之后的内容截取到str1变量
    221.                    str1 = str.substring(0,startIndex);
    222.  
    223.                    str2 = str.substring(startIndex, str.length );
    224.  
    225.                   console.log("str1: " + str1);
    226.                   console.log("str2: " + str2);
    227.                 } else {
    228.                   console.log("未找到第三个'['字符");
    229.                 }
    230.  
    231.  
    232.  
    233.                 // console.log(str2, 'str2',Object.prototype.toString.call(str2));
    234.                 that.daoRuJson = eval('(' + str1 + ')')
    235.                 let tabelData = eval('(' + str2 + ')')
    236.                 // that.daoRuJson = eval('(' + da.target.result + ')')
    237.                 that.tableColumnList = that.daoRuJson   
    238.                 that.tableData =  tabelData 
    239.                 console.log("表头数据",that.tableColumnList);
    240.                 console.log("表格数据",that.tableData);
    241.                 // console.log(that.daoRuJson, 'that.daoRuJson',Object.prototype.toString.call(that.daoRuJson));
    242.               }
    243.             }
    244.       },
    245.       handleEdit(index, row) {
    246.         console.log(index, row);
    247.       },
    248.       handleDelete(index, row) {
    249.         console.log(index, row);
    250.       },
    251.       getIndex(index){
    252.         console.log("index",index);
    253.         this.tableCellIndex = "";
    254.         this.tableCellIndex = index;
    255.       },
    256.       tsetClick(row, column, cell, event){
    257.         this.dialogForTable = true;
    258.         this.columnName = "";
    259.         this.columnName = column.property;
    260.         this.tableCell.tableCellData = "";
    261.         this.tableCell.tableCellData = row[this.columnName];
    262.         console.log("这里是表格内容单击事件",row);
    263.         console.log("这里是表格内容单击事件",column)
    264.         // console.log("这里是表格双击事件",cell)
    265.         // console.log("这里是表格双击事件",event)
    266.       },
    267.       //添加表头，修改表头
    268.       headerTest(val){
    269.         if(val.property == "addTableHeaderName"){
    270.           console.log("这里是表格tou部点击,添加头部事件",val)
    271.           this.tableColumnList.push({prop: this.num.toString(), propName: '点击编辑项目流程名称'})
    272.           for (let i = 0; i < this.tableData.length; i++) {
    273.             //this.tableData[i][parseInt(this.num)] = "请添加内容";
    274.             this.$set(this.tableData[i],[parseInt(this.num)],"请添加内容");
    275.           }
    276.           this.num = this.num+1;
    277.         }else {
    278.           console.log("这里是表格tou部点击，修改头部事件",val)
    279.           this.tableHeader.tableHeaderName = "";
    280.           this.tableHeader.property = "";
    281.           this.tableHeader.tableHeaderName = val.label;
    282.           this.tableHeader.property = val.property;
    283.           console.log(this.tableHeader.tableHeaderName)
    284.           this.dialogForHeader = true;
    285.         }
    286.       },
    287.       //表头编辑提交
    288.       submitForm(){
    289.         console.log("点击提交按钮");
    290.         for (let i = 0; i < this.tableColumnList.length; i++) {
    291.           console.log("this.tableHeader.property",this.tableHeader.property)
    292.           console.log("this.tableColumnList[i].prop",this.tableColumnList[i].prop)
    293.           if(this.tableColumnList[i].prop === this.tableHeader.property){
    294.             this.tableColumnList[i].propName = this.tableHeader.tableHeaderName;
    295.           }
    296.         }
    297.         console.log(this.tableColumnList)
    298.         this.dialogForHeader = false;
    299.       },
    300.       //表格内容编辑提交
    301.       submitForm1(){
    302.         //console.log("点击提交按钮");
    303.         if(this.tableCellIndex === "" || this.tableCellIndex === null){
    304.           alert("亲，请精准点击表格中的字进行修改！")
    305.         }else {
    306.             console.log("this.columnName",this.columnName)
    307.             console.log("this.tableData[this.tableCellIndex][this.columnName]",this.tableData[this.tableCellIndex][this.columnName])
    308.             console.log("this.tableData[this.tableCellIndex]",this.tableData[this.tableCellIndex])
    309.           this.tableData[this.tableCellIndex][this.columnName] = this.tableCell.tableCellData;
    310.           console.log(this.tableData);
    311.           this.rush();
    312.         }
    313.         this.dialogForTable = false;
    314.       },
    315.       //强制刷新数据
    316.       rush(){
    317.         this.$set(this.tableData);
    318.       },
    319.       //取消表头编辑
    320.       cancel(){
    321.         //console.log("点击取消按钮");
    322.         this.dialogForHeader = false;
    323.       },
    324.       //取消表格内容编辑
    325.       cancel1(){
    326.         //console.log("点击取消按钮");
    327.         this.dialogForTable = false;
    328.       },
    329.  
    330.     },
    331.   }
    332. script>

     

     

  • 相关阅读:
    MySQL高级【数据库设计】第八章
    华为配置wlan
    面向对象编程-终结篇 es6新增语法
    tomcat排错实战
    【C++面向对象程序设计】CH5 继承与派生（续）——虚基类
    Arouter源码系列之拦截器原理详解
    C#使用mysql-connector-net驱动连接mariadb报错
    抖音小店无货源，月入过万的玩法技巧！更多实操细节分享
    与机器学习相比，人类的学习包括视觉、听觉、触觉、嗅觉、味觉的串并行混合学习...
    TensorFlow 的基本概念和使用场景
  • 原文地址：https://blog.csdn.net/wanghaoyingand/article/details/133163028