1.前言
本文基于vue2及elementUI的表格组件
2.效果及功能展示
3.需求背景
有时候客户急需看到需求实现的页面，而此时后端接口没有，产品原型没有，只能前端出马，画一个静态页面，来展示客户想要的东西，如果是通过F12来改很慢，于是就有了这篇文章，使用它可以轻松的对表格的任何地方进行修改，且可以增加减少行或者列，它完全是由数据控制的，而在此基础上，还支持一键导入的功能，可以不用一个一个的编辑，直接一步到位。
4.技术实现
4.1 表格编辑
要说明的是，我使用的elementUI的表格组件，针对表格他们提供了一些事件，比如 点击表头事件：
说白了，其实就是将框架提供给我们的事件回调函数中有用的部分，对表头数据进行修改即可
4.2 表格增加列
在事件回调中，对数据进行push操作
4.3 一键导入
思路是 使用input标签的file文件上传功能（原生的标签过于丑陋，我给隐藏了，使用好看的按钮触发input的click事件即可） ，然后将导入的文件读取，并保存到变量中，转为数组。
我是在文件中放了两个数组，上面是表头，下面是表格数据。
我准备的数据源及格式如下：
5.核心代码展示
<template>
<div>
<div class="main-title" @click="$refs.fileInput.click()" >xxx库</div>
<input ref="fileInput" style="display:none" type="file" id="data2"
@change="upload()">
<div class="tollboxlist context_box_bg">
<div class="search-box">
<el-table :data="tableData" style="width: 98%;align: center" @cell-click="tsetClick" @header-click="headerTest">
<el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList" :key="item.prop" align="center">
<template slot-scope="scope">
<span @click="getIndex(scope.$index)">{
{scope.row[scope.column.property]}}</span>
</template>
</el-table-column>
<el-table-column label="." width="20" prop="addTableHeaderName" align="center"/>
</el-table>
<el-dialog :visible.sync="dialogForHeader" title="修改项目流程名称" width="800">
<el-form ref="form" :model="tableHeader" label-width="80px">
<el-form-item label="表头名称">
<el-input v-model="tableHeader.tableHeaderName" placeholder="请输入表头名称" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogForTable" title="修改项目流程内容" width="800">
<el-form ref="form" :model="tableCell" label-width="120px">
<el-form-item label="流程内容名称">
<el-input v-model="tableCell.tableCellData" placeholder="流程内容名称" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm1">确 定</el-button>
<el-button @click="cancel1">取 消</el-button>
</div>
</el-dialog>
<el-pagination
:page-size="page_size"
background
layout="total, prev, pager, next, sizes,jumper"
:total="total"
:current-page="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</div>
<el-dialog class="zidiandia" title="新建字典" :visible.sync="createDictionaries" v-if="createDictionaries" :before-close="cancelform" width='1184px' :close-on-click-modal="false" :show-close="false">
<div class="dialog_b_btn">
<el-button size="small" @click="handleCreateSave">保存</el-button>
<el-button size="small" @click="handleSaveCancel">取消</el-button>
</div>
<Edit
:exhibitionList="exhibitionList"
:serviceType="serviceType"
:dictionariesType="dictionariesType"
:pageType = "pageType"
ref="createEditRef"
></Edit>
</el-dialog>
<el-dialog title="详情" :visible.sync="editDictionaries" :before-close="cancelform" width='1184px' :close-on-click-modal="false" :show-close="false">
<div class="dialog_b_btn">
<el-button size="small" @click="handleClickEdit" v-if="isUpdate">编辑</el-button>
<el-button size="small" v-else >编辑中</el-button>
<el-button size="small" @click="handleEditSave" v-if="!isUpdate">保存</el-button>
<el-button size="small" @click="handleEditCancel">取消</el-button>
</div>
<Edit
v-if="editShow"
:show="isUpdate"
:exhibitionList="exhibitionList"
:serviceType="serviceType"
:dictionariesType="dictionariesType"
:editData="editData"
:pageType = "pageType"
ref="cancelEditRef"
></Edit>
</el-dialog>
</div>
<!-- 6666666666666 -->
</template>
<script>
export default {
data() {
return {
// 这里为了简便我就没有调用后台接口获取数据，直接写的假数据 你要用的话可以调用后台接口
获取tableColumnList，注意数据格式
tableColumnList:
[
{prop: '0', propName: '编号8888'},
{prop: '2', propName: '名字'},
{prop: '3', propName: '保质期'},
{prop: '4', propName: '特点1'},
],
tableData: [{
0: '2016-05-01',
2: '王小虎1',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
}, {
0: '2016-05-02',
2: '王小虎2',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
}, {
0: '2016-05-03',
2: '王小虎3',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
}, {
0: '2016-05-04',
2: '王小虎4',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
}, {
0: '2016-05-05',
2: '王小虎5',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-06',
},
{
0: '2016-05-07',
2: '王小虎6',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
},
{
0: '2016-05-07',
2: '王小虎6',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
},
{
0: '2016-05-07',
2: '王小虎6',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
},
{
0: '2016-05-07',
2: '王小虎6',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
},
{
0: '2016-05-07',
2: '王小虎6',
3: '上海市普陀区金沙江路 1518 弄',
4: '2016-05-02',
}
],
}
},
methods: {
upload(e){
let that = this;
console.log("点击了上传按钮");
let da = window.event || e // change事件获取到的数据
var file = da.target.files[0]
console.log(file, 'file===');
if (true) {
var reader = new FileReader()
reader.readAsText(file, "utf-8")//gbk编码 还有其他方式比如gpk
reader.onload = function (da) {
console.log(da.target.result, 'da',Object.prototype.toString.call(da.target.result));
//查找字符串中第三个‘[’并截取，分别保存到str1和str2中
let str1 = "";
let str2 = "";
var str = da.target.result;
// 计数器，用于记录'['的出现次数
var count = 0;
// 保存第三个'['字符的索引
var startIndex = -1;
// 遍历字符串
for (var i = 0; i < str.length; i++) {
// 如果找到了第2个'['字符
if (str[i] === '[') {
// 计数器加1
count++;
// 如果计数器为3，则保存索引并跳出循环
if (count === 2) {
startIndex = i;
break;
}
}
}
// 如果找到了第三个'['字符
if (startIndex !== -1) {
// 使用字符串的截取函数substring将第三个'['之后的内容截取到str1变量
str1 = str.substring(0,startIndex);
str2 = str.substring(startIndex, str.length );
console.log("str1: " + str1);
console.log("str2: " + str2);
} else {
console.log("未找到第三个'['字符");
}
// console.log(str2, 'str2',Object.prototype.toString.call(str2));
that.daoRuJson = eval('(' + str1 + ')')
let tabelData = eval('(' + str2 + ')')
// that.daoRuJson = eval('(' + da.target.result + ')')
that.tableColumnList = that.daoRuJson
that.tableData = tabelData
console.log("表头数据",that.tableColumnList);
console.log("表格数据",that.tableData);
// console.log(that.daoRuJson, 'that.daoRuJson',Object.prototype.toString.call(that.daoRuJson));
}
}
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
getIndex(index){
console.log("index",index);
this.tableCellIndex = "";
this.tableCellIndex = index;
},
tsetClick(row, column, cell, event){
this.dialogForTable = true;
this.columnName = "";
this.columnName = column.property;
this.tableCell.tableCellData = "";
this.tableCell.tableCellData = row[this.columnName];
console.log("这里是表格内容单击事件",row);
console.log("这里是表格内容单击事件",column)
// console.log("这里是表格双击事件",cell)
// console.log("这里是表格双击事件",event)
},
//添加表头，修改表头
headerTest(val){
if(val.property == "addTableHeaderName"){
console.log("这里是表格tou部点击,添加头部事件",val)
this.tableColumnList.push({prop: this.num.toString(), propName: '点击编辑项目流程名称'})
for (let i = 0; i < this.tableData.length; i++) {
//this.tableData[i][parseInt(this.num)] = "请添加内容";
this.$set(this.tableData[i],[parseInt(this.num)],"请添加内容");
}
this.num = this.num+1;
}else {
console.log("这里是表格tou部点击，修改头部事件",val)
this.tableHeader.tableHeaderName = "";
this.tableHeader.property = "";
this.tableHeader.tableHeaderName = val.label;
this.tableHeader.property = val.property;
console.log(this.tableHeader.tableHeaderName)
this.dialogForHeader = true;
}
},
//表头编辑提交
submitForm(){
console.log("点击提交按钮");
for (let i = 0; i < this.tableColumnList.length; i++) {
console.log("this.tableHeader.property",this.tableHeader.property)
console.log("this.tableColumnList[i].prop",this.tableColumnList[i].prop)
if(this.tableColumnList[i].prop === this.tableHeader.property){
this.tableColumnList[i].propName = this.tableHeader.tableHeaderName;
}
}
console.log(this.tableColumnList)
this.dialogForHeader = false;
},
//表格内容编辑提交
submitForm1(){
//console.log("点击提交按钮");
if(this.tableCellIndex === "" || this.tableCellIndex === null){
alert("亲，请精准点击表格中的字进行修改！")
}else {
console.log("this.columnName",this.columnName)
console.log("this.tableData[this.tableCellIndex][this.columnName]",this.tableData[this.tableCellIndex][this.columnName])
console.log("this.tableData[this.tableCellIndex]",this.tableData[this.tableCellIndex])
this.tableData[this.tableCellIndex][this.columnName] = this.tableCell.tableCellData;
console.log(this.tableData);
this.rush();
}
this.dialogForTable = false;
},
//强制刷新数据
rush(){
this.$set(this.tableData);
},
//取消表头编辑
cancel(){
//console.log("点击取消按钮");
this.dialogForHeader = false;
},
//取消表格内容编辑
cancel1(){
//console.log("点击取消按钮");
this.dialogForTable = false;
},
},
}
</script>