保定网站建设报价,wordpress图书类主题,专业做网站较好的公司,教育培训门户网站模板下载适用场景#xff1a;有若干个表格#xff0c;前面几列格式不一致#xff0c;但是后面几列格式皆为占一个单元格#xff0c;所以需要封装表格#xff0c;表格元素自动根据数据结构生成即可#xff1b;并且用户可新增列数据。
分类#xff1a; 固定数据部分 就是根据数据…适用场景有若干个表格前面几列格式不一致但是后面几列格式皆为占一个单元格所以需要封装表格表格元素自动根据数据结构生成即可并且用户可新增列数据。
分类 固定数据部分 就是根据数据结构传参设置table单元格内容及格式数据结构由前端定义 可新增删除部分 是由用户操作格式统一为占一格返回数据结构以列为单位其中删除列以判断对应列是否有表头为依据。
展示效果如下 封装原生表格演示 目录 固定表格部分数据格式元素设置 可新增删除部分数据格式元素设置新增的方法删除的方法数据转换将格式转化为以列将格式转化为以表格 全部代码 固定表格部分
需要确定的是固定表格中的需要给单元格元素传哪些值
单元格的内容单元格格式会有很多种情况可能会占几行也可能会占几列所以就需要控制着每个单元格的colspan和rowspan单元格的内容长短不一致所以也需要控制着单元格的宽度
其它参数可有可无需要依照自身需求添加逻辑。
数据格式
数据格式有四大字段分别控制着出表头以外的行数(tdRows)为了便于控制除表头的tr循环次数表格名称(title)表头内容(ths)和表身内容(tds)。
SafetyTableData:{tdRows: 3,//除表头的tbody所占行数title: 表格名称表格名称表格名称表格名称表格名称,ths: [{thName: Safety/安全,colspan: 1,rowspan: 4,isEdit: false,width: 100,},{thName: 关键指标KPI,colspan: 2,rowspan: 1,isEdit: false,width: 100,},{thName: 输出部门,colspan: 1,rowspan: 1,isEdit: false,width: 100,},{thName: 公式,colspan: 1,rowspan: 1,isEdit: false,width: 180,},{thName: 单位,colspan: 1,rowspan: 1,isEdit: false,width: 100,},],tds: [[{ tdName: 伤害, colspan: 1, rowspan: 3, isEdit: false, width: 30, },{ tdName: 占比%, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: 游戏, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: (损失工时/ 投入工时)*100%, colspan: 1, rowspan: 1, isEdit: false, width: 180, },{ tdName: %, colspan: 1, rowspan: 1, isEdit: false, width: 100, },],[{ tdName: 一些值, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: 游戏, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: ABCDEFG, colspan: 1, rowspan: 1, isEdit: false, width: 180, },{ tdName: absolute, colspan: 1, rowspan: 1, isEdit: false, width: 100, },],[{ tdName: 实际占比%, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: 游戏, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: (实际损失工时/实际投入工时)*100%, colspan: 1, rowspan: 1, isEdit: false, width: 180, },{ tdName: %, colspan: 1, rowspan: 1, isEdit: false, width: 100, },],// Repeat similar structure for other rows as needed],},元素设置
detailTableData为表格固定格式需要显示的数据前面已设置了SafetyTableData的数据格式可以直接将SafetyTableData赋值给detailTableData。若还有其他固定表格格式同理视情况赋值即可。
table border1tr reftableHeaderth v-for(thItem, index) in detailTableData.ths :keyth- index :rowspanthItem.rowspan :colspanthItem.colspan :stylewidth:thItem.widthpx{{thItem.thName}}/th/trtr v-forrowIndex in detailTableData.tdRows :keyrowIndextd v-for(tdItem, colIndex) in detailTableData.tds[rowIndex-1] :keytd- rowIndex - colIndex :rowspantdItem.rowspan :colspantdItem.colspan :stylewidth:tdItem.widthpx{{tdItem.tdName}}/td/tr
/table可新增删除部分
既然可新增删除部分都是占一个单元格那么可以确定的是colspan和rowspan都为1。
数据格式
全局参数(newTableData)用于存放所有用户新增的数据newThObj为新增表头时的数据newTdObj为新增表身时的数据。
newTableData: {ths: [],tds: [], // 初始包含一个空数组
},
newThObj: {thName: ,colspan: 1,rowspan: 1,isEdit: true,
},
newTdObj: {tdName: ,colspan: 1,rowspan: 1,isEdit: true,
},元素设置
table border1tr reftableHeaderth v-for(newThItem,newindex) in newTableData.ths :keynewindex classitem :idtestnewindexel-input v-ifnewThItem.isEdit editTableSate v-modelnewThItem.thName placeholder请输入时间/el-inputspan v-else{{newThItem.thName}}/span/th/trtr v-forrowIndex in detailTableData.tdRows :keyrowIndextd v-for(newTdItem, newColIndex) in newTableData.tds[rowIndex-1] :keynewColIndexel-input v-ifnewTdItem.isEdit editTableSate v-modelnewTdItem.tdName placeholder请输入/el-inputspan v-else{{newTdItem.tdName}}/span/td/tr
/table新增的方法
// 新增列的点击事件addTableColBtn() {// 向 newTableData.ths 添加一个新的表头对象this.newTableData.ths.push({ ...this.newThObj });// 如果 tds 为空需要初始化它if (this.newTableData.tds.length 0) {for (let i 0; i this.detailTableData.tdRows; i) {this.newTableData.tds.push([]);}}// 遍历每一行添加空单元格以匹配表头列数this.newTableData.tds.forEach(row {row.push({ ...this.newTdObj });});},删除的方法
// 反向遍历以避免删除元素时影响索引 -- 以表头为准若表头为空则提交后对应列为空for (let i this.newTableData.ths.length - 1; i 0; i--) {if (!this.newTableData.ths[i].thName) {let shouldDeleteColumn true;for (let row 0; row this.newTableData.tdRows; row) {if (this.newTableData.tds[row][i].tdName) {shouldDeleteColumn false;break;}}// 如果该列满足删除条件则删除if (shouldDeleteColumn) {this.newTableData.ths.splice(i, 1);this.newTableData.tds.forEach(row {row.splice(i, 1);});}}}数据转换 将格式转化为以列
将newTableData{ths: [], tds: [],}转化为data[{SORT:‘’,TIME:‘’,TLLRGOAL:‘’,AF:‘’,ACTUALTLLR:‘’,}]格式
/*** 用于表格封装方法* param {*object} newTableData:{ths:[],tds:[],} * param {*string} type* returns {*array} array:[{SORT:,TIME:,Cells1:,Cells2:,Cells3:,}]*/transformTableData(newTableData, type) {const transformedData [];newTableData.ths.forEach((th, index) {const thName th.thName;const colIndex index;var transformedObj {};switch (type) {case Safety://安全transformedObj {SORT: (colIndex 1).toString(),//列数TIME: thName,//表头内容Cells1: newTableData.tds[0][colIndex].tdName,//单元格内容1Cells2: newTableData.tds[1][colIndex].tdName,//单元格内容2Cells3: newTableData.tds[2][colIndex].tdName//单元格内容3};break;default:break;}transformedData.push(transformedObj);});return transformedData;}将格式转化为以表格
将data[{SORT:‘’,TIME:‘’,TLLRGOAL:‘’,AF:‘’,ACTUALTLLR:‘’,}]格式转化为newTableData{ths: [], tds: [],}
/*** 用于将获取数据返回至符合表格的封装方法* param {*array} data:[{SORT:,TIME:,Cells1:,Cells2:,Cells3:,}]* returns {*object} newTableData:{ths:[],tds:[],} */transformData(data) {// 初始化 newTableData 结构let newTableData {ths: [],tds: []};// 提取所有的列名除了 SORT 和 TIME、ID,因为这三个是固定的const columns Object.keys(data[0]).filter(key key ! SORT key ! TIME key ! ID);// 填充 ths 数组newTableData.ths data.map(item ({thName: item.TIME,colspan: 1,rowspan: 1,isEdit: true}));// 填充 tds 数组for (let column of columns) {let columnData data.map(item ({tdName: item[column],colspan: 1,rowspan: 1,isEdit: true}));// 将每个字段的值按顺序插入 tds 数组newTableData.tds.push([...columnData]);}return newTableData;}全部代码
templatediv classtestboxdiv classbartype-classdiv classverticalbar-class/divh4Details/h4el-button v-if!editTableSate clickeditTableBtn sizemini iconel-icon-edit stylemargin-left:2%;编 辑/el-buttondiv v-else stylemargin-left: auto;display:flex;el-button clickaddTableColBtn sizemini iconel-icon-plus新增列/el-buttonel-button clicksaveTableBtn sizemini iconel-icon-upload提 交/el-button/div/divdiv classtabletitle-class v-ifdetailTableData.title{{detailTableData.title}}/divdiv classbar-class mytable styleoverflow: auto;table border1tr reftableHeaderth v-for(thItem, index) in detailTableData.ths :keyth- index :rowspanthItem.rowspan :colspanthItem.colspan :stylewidth:thItem.widthpx{{thItem.thName}}/thth v-for(newThItem,newindex) in newTableData.ths :keynewindex classitem :idtestnewindexel-input v-ifnewThItem.isEdit editTableSate v-modelnewThItem.thName placeholder请输入时间/el-inputspan v-else{{newThItem.thName}}/span/th/trtr v-forrowIndex in detailTableData.tdRows :keyrowIndextd v-for(tdItem, colIndex) in detailTableData.tds[rowIndex-1] :keytd- rowIndex - colIndex :rowspantdItem.rowspan :colspantdItem.colspan :stylewidth:tdItem.widthpx{{tdItem.tdName}}/tdtd v-for(newTdItem, newColIndex) in newTableData.tds[rowIndex-1] :keynewColIndexel-input v-ifnewTdItem.isEdit editTableSate v-modelnewTdItem.tdName placeholder请输入/el-inputspan v-else{{newTdItem.tdName}}/span/td/tr/table/div/div
/templatescriptexport default {components: {},data() {return {detailTableData: {},//表格显示的数据// 安全表格固定数据;ID: 6SafetyTableData:{tdRows: 3,//除表头的tbody所占行数title: 表格名称表格名称表格名称表格名称表格名称,ths: [{thName: Safety/安全,colspan: 1,rowspan: 4,isEdit: false,width: 100,},{thName: 关键指标KPI,colspan: 2,rowspan: 1,isEdit: false,width: 100,},{thName: 输出部门,colspan: 1,rowspan: 1,isEdit: false,width: 100,},{thName: 公式,colspan: 1,rowspan: 1,isEdit: false,width: 180,},{thName: 单位,colspan: 1,rowspan: 1,isEdit: false,width: 100,},],tds: [[{ tdName: 伤害, colspan: 1, rowspan: 3, isEdit: false, width: 30, },{ tdName: 占比%, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: 游戏, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: (损失工时/ 投入工时)*100%, colspan: 1, rowspan: 1, isEdit: false, width: 180, },{ tdName: %, colspan: 1, rowspan: 1, isEdit: false, width: 100, },],[{ tdName: 一些值, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: 游戏, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: ABCDEFG, colspan: 1, rowspan: 1, isEdit: false, width: 180, },{ tdName: absolute, colspan: 1, rowspan: 1, isEdit: false, width: 100, },],[{ tdName: 实际占比%, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: 游戏, colspan: 1, rowspan: 1, isEdit: false, width: 100, },{ tdName: (实际损失工时/实际投入工时)*100%, colspan: 1, rowspan: 1, isEdit: false, width: 180, },{ tdName: %, colspan: 1, rowspan: 1, isEdit: false, width: 100, },],// Repeat similar structure for other rows as needed],},newTableData: {ths: [],tds: [], // 初始包含一个空数组},newThObj: {thName: ,colspan: 1,rowspan: 1,isEdit: true,},newTdObj: {tdName: ,colspan: 1,rowspan: 1,isEdit: true,},editTableSate: false,//表格编辑状态};},created() {},computed: {},mounted() {this.detailTableData this.SafetyTableData;},methods: {// 编辑表格按钮editTableBtn() {this.editTableSate true;},// 新增列的点击事件addTableColBtn() {// 向 newTableData.ths 添加一个新的表头对象this.newTableData.ths.push({ ...this.newThObj });// 如果 tds 为空需要初始化它if (this.newTableData.tds.length 0) {for (let i 0; i this.detailTableData.tdRows; i) {this.newTableData.tds.push([]);}}// 遍历每一行添加空单元格以匹配表头列数this.newTableData.tds.forEach(row {row.push({ ...this.newTdObj });});},// 保存表格的点击事件saveTableBtn() {// 反向遍历以避免删除元素时影响索引 -- 以表头为准若表头为空则提交后对应列为空for (let i this.newTableData.ths.length - 1; i 0; i--) {if (!this.newTableData.ths[i].thName) {let shouldDeleteColumn true;for (let row 0; row this.newTableData.tdRows; row) {if (this.newTableData.tds[row][i].tdName) {shouldDeleteColumn false;break;}}// 如果该列满足删除条件则删除if (shouldDeleteColumn) {this.newTableData.ths.splice(i, 1);this.newTableData.tds.forEach(row {row.splice(i, 1);});}}}this.saveTableDataFun();},// 保存表格数据函数async saveTableDataFun() {var data [];if (this.newTableData.ths.length) {data this.transformTableData(this.newTableData, Safety);}console.log(data:, data);this.editTableSate false;},/*** 用于表格封装方法* param {*object} newTableData:{ths:[],tds:[],} * param {*string} type* returns {*array} array:[{SORT:,TIME:,Cells1:,Cells2:,Cells3:,}]*/transformTableData(newTableData, type) {const transformedData [];newTableData.ths.forEach((th, index) {const thName th.thName;const colIndex index;var transformedObj {};switch (type) {case Safety://安全transformedObj {SORT: (colIndex 1).toString(),//列数TIME: thName,//表头内容Cells1: newTableData.tds[0][colIndex].tdName,//单元格内容1Cells2: newTableData.tds[1][colIndex].tdName,//单元格内容2Cells3: newTableData.tds[2][colIndex].tdName//单元格内容3};break;default:break;}transformedData.push(transformedObj);});return transformedData;},/*** 用于将获取数据返回至符合表格的封装方法* param {*array} data:[{SORT:,TIME:,Cells1:,Cells2:,Cells3:,}]* returns {*object} newTableData:{ths:[],tds:[],} */transformData(data) {// 初始化 newTableData 结构let newTableData {ths: [],tds: []};// 提取所有的列名除了 SORT 和 TIME、ID,因为这三个是固定的const columns Object.keys(data[0]).filter(key key ! SORT key ! TIME key ! ID);// 填充 ths 数组newTableData.ths data.map(item ({thName: item.TIME,colspan: 1,rowspan: 1,isEdit: true}));// 填充 tds 数组for (let column of columns) {let columnData data.map(item ({tdName: item[column],colspan: 1,rowspan: 1,isEdit: true}));// 将每个字段的值按顺序插入 tds 数组newTableData.tds.push([...columnData]);}return newTableData;}},watch: {}
};
/scriptstyle scoped
.testbox {width: 100%;height: 100%;
}
.bartype-class {display: flex;align-items: center;height: 25px;margin: 10px 0;
}
.verticalbar-class {width: 4px;height: 100%;background: #555555;margin-right: 9px;
}.mytable table {border-collapse: collapse;width: 100%;font-size: 12px;
}
.mytable table td:first-child,
th:first-child {/* font-weight: bold; *//* background-color: pink; */width: 15%;
}
.mytable table th,
td {border: 1px solid #ddd;text-align: center;padding: 8px;
}.mytable table th {background-color: #f2f2f2;
}
.text-left {text-align: left;
}
.mytable .el-input {width: 80px;
}
.mytable .el-input__inner {padding: 0 5px;
}
.item {cursor: pointer;
}
.tabletitle-class {background: #0070c0;color: #fff;margin: 0.5% 0;display: flex;justify-content: center;align-items: center;height: 30px;font-weight: bold;letter-spacing: 2px;
}
/style
