需求描述

根据项目需求，需要用户填写几行几列，表头自定义动态添加，用户可以手动新增行、新增列、删除行、删除列，怎么实现一起来看看吧~

1.自定义表头，表头里插入输入框

<el-form ref="historyForm" :model="historyForm" size="small"><div class="table-box" @contextmenu.prevent.capture><el-table:data="historyForm.tableData":loading="loading"style="width: 100%"class="list-table default-scrollbar"size="mini"@header-contextmenu="rightClickColShowFun"@row-contextmenu="rightClickRowShowFun":cell-class-name="tableClassName"border><el-table-column label="序号" align="center" width="50"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column><el-table-column label="等位基因" align="center" prop="name" class-name="cellDefault"><template slot-scope="scope"><el-input v-model="scope.row.name" class="name-input"></el-input></template></el-table-column><el-table-column :label="'ABO-'+`${colList.length}`+'位点'" class-name="specital-title"><el-table-column align="center" class-name="cellDefault" v-for="(item,index) in colList" :key="index" min-width="40"><template #header><el-input v-model="colList[index]" size="mini" @change="setColName(index,colList[index])"/></template><template slot-scope="scope"><el-input type="number" v-model.number="scope.row[item].value" @input="setInputVal" :class="scope.row[item].checked ? 'red' : ''"></el-input></template></el-table-column></el-table-column></el-table><div class="add-column" @click="addColSetting">+</div></div><div class="add-line" @click="addParamsSetting">+</div>
</el-form>

data() {return {// 遮罩层loading: true,// 表单参数-表格内容数据historyForm: {tableData: []},// 表头列表数组colList: [],isAddCol: true,colNum: 0,rowNum: 0,currentId: null,mouldName: "A101templete",dialogRowVisible: false,// 新增行dialogColVisible: false,// 新增列currentClickRow: null,currentClickCol: null,resultList: [],};
},

特别注意： 添加 #header 才能自定义插入表头，否则会出现input框不能进行输入的Bug。

2.默认初始化几行几列占位

例如当前为3行4列占位，效果如下图展示。

methods: {// 根据默认几行几列初始化表格init() {for (let i = 0; i < this.colNum; i++) {this.colList.push("");}for (let j = 0; j < this.rowNum; j++) {if (j === 0) {this.historyForm.tableData.push({name: this.mouldName,"": {value: null,checked: 0}});}else {this.historyForm.tableData.push({name: null,"": {value: null,checked: 0}});}}},
}

3.新增行

// 新增行
methods: {// 在数组最后添加一行addParamsSetting () {this.addList()},addList () {let item = {name: null,};for (let i in this.colList) {item[this.colList[i]] = {value: null,checked: 0}}this.historyForm.tableData.push(item);},
}

4.新增列

methods: {// 在数据最后新增一列addColSetting() {for (let i in this.colList) {if (this.colList[i] === "") {this.isAddCol = false;}else {this.isAddCol = true;}}if (this.isAddCol) {this.addColList();}else {this.$message.success("还有未填写的列");}},// 新增列addColList() {let list = this.historyForm.tableData;for (let i = 0; i < list.length; i++) {list[i][""] = {value: null,checked: 0};}this.colList.push("");},
}

注意事项： 因为表头是自定义输入框动态添加的，所以需要限制用户先把表头填写完成，再进行填写单元格的内容，新添加列也同理，否则会出现数据重复的Bug。

5.右键点击行，进行删除行

想要删除行，首先要拿到rowIndex，我们可以利用:cell-class-name=“tableClassName”，拿到rowIndex，赋值给row，@row-contextmenu=“rightClickRowShowFun”，即可拿到行的索引，进行删除行操作。

methods: {// 给数据的row、column赋index，便于进行删除行、删除列tableClassName({row, column, rowIndex, columnIndex}) {row.index = rowIndex;column.index  = columnIndex - 2;if(rowIndex === 0){return 'blue'}},// 右键单击选中行-确认是否删除行rightClickRowShowFun(row) {this.currentClickRow = row.index;this.dialogRowVisible = true;},// 确认删除行submitFunRow() {this.dialogRowVisible = false;this.deleteRow(this.currentClickRow);},// 删除当前行deleteRow (index) {this.historyForm.tableData.splice(index, 1)},
}

6.右键点击表头，进行删除列

想要删除列，首先要拿到columnIndex，我们可以利用:cell-class-name=“tableClassName”，拿到columnIndex，赋值给column，@header-contextmenu=“rightClickColShowFun”，即可拿到列的索引，进行删除列操作。

methods: {// 给数据的row、column赋index，便于进行删除行、删除列tableClassName({row, column, rowIndex, columnIndex}) {row.index = rowIndex;column.index  = columnIndex - 2;if(rowIndex === 0){return 'blue'}},// 右键单击选中行-确认是否删除列rightClickColShowFun(column, event) {this.currentClickCol = column.index;this.dialogColVisible = true;},// 确认删除列submitFunCol() {this.dialogColVisible = false;this.deleteCol(this.currentClickCol);},// 删除当前列deleteCol (index) {this.colList.splice(index, 1)},
}

7.效果展示

单元格和表头内都插入的是输入框，写css样式可以进行修改输入框样式，我这里给单元格内的输入框限制了number类型（v-model.number），会出现上下增加数值的按钮，我给隐藏掉了，代码如下：

.cellDefault{padding: 0!important;.cell{padding: 0!important;input{border: none;border-radius: 0;text-align: center;background: #EEF8FF;padding: 0;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;}}}

8.所有代码总结

<template><div class="app-container haplotype-detail default-scrollbar"><div><el-form ref="historyForm" :model="historyForm" size="small"><div class="table-box" @contextmenu.prevent.capture><el-table:data="historyForm.tableData":loading="loading"style="width: 100%"class="list-table default-scrollbar"size="mini"@header-contextmenu="rightClickColShowFun"@row-contextmenu="rightClickRowShowFun":cell-class-name="tableClassName"border><el-table-column label="序号" align="center" width="50"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column><el-table-column label="等位基因" align="center" prop="name" class-name="cellDefault"><template slot-scope="scope"><el-input v-model="scope.row.name" class="name-input"></el-input></template></el-table-column><el-table-column :label="'ABO-'+`${colList.length}`+'位点'" class-name="specital-title"><el-table-column align="center" class-name="cellDefault" v-for="(item,index) in colList" :key="index" min-width="40"><template #header><el-input v-model="colList[index]" size="mini" @change="setColName(index,colList[index])"/></template><template slot-scope="scope"><el-input type="number" v-model.number="scope.row[item].value" @input="setInputVal" :class="scope.row[item].checked ? 'red' : ''"></el-input></template></el-table-column></el-table-column></el-table><div class="add-column" @click="addColSetting">+</div></div><div class="add-line" @click="addParamsSetting">+</div><div class="start-btn-box"><el-button type="primary" @click="startComparisonFun" class="start-btn">开始对比</el-button></div></el-form></div><el-dialogtitle="温馨提示":visible.sync="dialogRowVisible"width="250px"><span>确定删除此行数据嘛？</span><div slot="footer" class="dialog-footer"><el-button @click="dialogRowVisible = false">取 消</el-button><el-button type="primary" @click="submitFunRow">确 定</el-button></div></el-dialog><el-dialogtitle="温馨提示":visible.sync="dialogColVisible"width="250px"><span>确定删除此列数据嘛？</span><div slot="footer" class="dialog-footer"><el-button @click="dialogColVisible = false">取 消</el-button><el-button type="primary" @click="submitFunCol">确 定</el-button></div></el-dialog></div>
</template>
<script>
export default {name: "haplotypeDetail",data() {return {// 遮罩层loading: true,// 表单参数-表格内容数据historyForm: {tableData: []},// 表头列表数组colList: [],isAddCol: true,colNum: 0,rowNum: 0,currentId: null,mouldName: "A101templete",dialogRowVisible: false,// 新增行dialogColVisible: false,// 新增列currentClickRow: null,currentClickCol: null,resultList: [],};},methods: {// 根据默认几行几列初始化表格init() {for (let i = 0; i < this.colNum; i++) {this.colList.push("");}for (let j = 0; j < this.rowNum; j++) {if (j === 0) {this.historyForm.tableData.push({name: this.mouldName,"": {value: null,checked: 0}});}else {this.historyForm.tableData.push({name: null,"": {value: null,checked: 0}});}}},// 在数组最后添加一行addParamsSetting () {this.addList()},// 新增行addList () {let item = {name: null,};for (let i in this.colList) {item[this.colList[i]] = {value: null,checked: 0}}this.historyForm.tableData.push(item);},// 删除当前行deleteRow (index) {this.historyForm.tableData.splice(index, 1)},// 在数据最后新增一列addColSetting() {for (let i in this.colList) {if (this.colList[i] === "") {this.isAddCol = false;}else {this.isAddCol = true;}}if (this.isAddCol) {this.addColList();}else {this.$message.success("还有未填写的列");}},// 新增列addColList() {let list = this.historyForm.tableData;for (let i = 0; i < list.length; i++) {list[i][""] = {value: null,checked: 0};}this.colList.push("");},// 修改表头名funsetColName(index, val) {let list = this.historyForm.tableData;for (let i = 0; i < list.length; i++) {this.$set(list[i],val,{value: null,checked: 0})}this.$forceUpdate();},// 输入内容数据的funsetInputVal() {for (let i in this.colList) {if (this.colList[i] === "") {this.isAddCol = false;}else {this.isAddCol = true;}}if (!this.isAddCol) {this.$message.success("请先填写完成所有表头内容，且确保无误！");let list = this.historyForm.tableData;for (let j = 0; j < list.length; j++) {if (list[j][""]) {list[j][""] = {value: null,checked: 0};}}}},// 右键单击选中行-确认是否删除行rightClickRowShowFun(row, column, event) {this.currentClickRow = row.index;this.dialogRowVisible = true;},// 右键单击选中行-确认是否删除列rightClickColShowFun(column, event) {this.currentClickCol = column.index;this.dialogColVisible = true;},// 确认删除行submitFunRow() {this.dialogRowVisible = false;this.deleteRow(this.currentClickRow);},// 给数据的row、column赋index，便于进行删除行、删除列tableClassName({row, column, rowIndex, columnIndex}) {row.index = rowIndex;column.index  = columnIndex - 2;if(rowIndex === 0){return 'blue'}},// 确认删除列submitFunCol() {this.dialogColVisible = false;this.deleteCol(this.currentClickCol);},// 删除当前列deleteCol (index) {this.colList.splice(index, 1)},},
}
</script>
<style lang="scss">
.haplotype-detail{.list-table{background: #EEF8FF;&.el-table thead.is-group th.el-table__cell{background: #EEF8FF;}&.el-table td.el-table__cell{background: #EEF8FF;color: #0083D7;}.name-input{input{color: #0083D7;}}.specital-title{color: #0083D7;font-size: 16px;font-family: Source Han Sans CN;font-weight: bold;}}.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{background: #A0D8FF;.cell input{background: #A0D8FF;}}.cellDefault{padding: 0!important;.cell{padding: 0!important;input{border: none;border-radius: 0;text-align: center;background: #EEF8FF;padding: 0;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;}}}th.cellDefault{input{background: #F5F7FA;}}.red{background: #E8CCCB;input{background: #E8CCCB!important;color: #DD262F;}}.blue{background: #A0D8FF!important;input{background: #A0D8FF!important;}}
}

vue element-ui自定义表头，动态添加表头，新增行、新增列、删除行、删除列相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...

vue element-ui自定义表头，动态添加表头，新增行、新增列、删除行、删除列

vue element-ui表格怎样自定义表头，动态添加表头，新增行、新增列、删除行、删除列