table表格单元格合并，(自定义)

效果图：

<template><div class="table"><table border="1" cellspacing="0"><thead><tr><th style="page-break-after:always;">序号</th><th class="project" colspan="2">检查测试项目</th><th class="input_w">检查测试内容</th><th class="select">周期</th><th class="input_w">设备总数</th><th class="input_w">检查数量</th><th>检查月份</th></tr></thead><tbody class="dis"><template v-for="(item, index) in items"><trv-for="(list, innerIndex) in item.children":key="`${index}---${innerIndex}`"><template v-if="innerIndex == 0"><td v-text="index + 1" :rowspan="item.children.length"></td><td :rowspan="item.children.length" v-text="item.subTask"></td><td :rowspan="item.children.length" v-text="item.project"></td></template><td class="input_w"><el-inputv-model="list.content"placeholder="请输入内容"@change="change(item, list)"></el-input></td><td class="select"><el-selectv-model="list.cycle"placeholder="请选择"@change="change(item, list)"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></td><td class="input_w"><el-inputv-model="list.allNumber"placeholder="请输入内容"></el-input></td><td class="input_w"><el-inputv-model="list.number"placeholder="请输入内容"></el-input></td><td v-text="list.month"></td></tr></template></tbody></table></div>
</template><script>
export default {props: {items: {type: Array,default: () => {return [];},},},data() {return {options: [{value: "0",label: "纪检",},{value: "1",label: "年检",},],value: "",};},created() {},computed: {status() {return status;},},methods: {// 当前行的数据change(item, list) {this.$emit("change",item,list );},},
};
</script><style lang="less" scoped>
* {margin: 0;padding: 0;
}
.table {width: 100%;table {width: 100%;border: 1px solid #ccc;tr {page-break-after: always;td,th {border: 1px solid #ccc;border-width: 0px 1px 1px 0px;width: auto;line-height: 40px;text-align: center;}th {background: #f7f8fa;}.input_w,.select {width: 15%;box-sizing: border-box;padding: 10px;}}}
}
</style>数据格式
```javascriptprogressList: [{subTask: "突出",project: "项目",rows: "asdfasdfa",completeTime: "贯穿全年",children: [{content: "内容",cycle: "1",allNumber: "总数",number: "数量",month: "月份",},{content: "内容",cycle: "0",allNumber: "总数",number: "数量",month: "月份",},{content: "内容",cycle: "1",allNumber: "总数",number: "数量",month: "月份",},],},{subTask: "突出",project: "项目",rows: "asdfasdfa",completeTime: "贯穿全年",children: [{content: "内容",cycle: "0",allNumber: "总数",number: "数量",month: "月份",},{content: "内容",cycle: "1",allNumber: "总数",number: "数量",month: "月份",},{content: "内容",cycle: "0",allNumber: "总数",number: "数量",month: "月份",},],},],

table表格单元格合并，(自定义)相关推荐

Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
vue项目element-ui的table表格单元格合并
一.合并效果二全部代码 <template><div class="table-wrap"><el-table:data="tableDa ...
elementUI——表格单元格合并——技能提升
elementUI--表格单元格合并--技能提升之前写过一个关于单元格合并的功能,要求根据某一个参数比如序号,如果同一个序号下的某些参数前后的数据一致,则需要实现单元格的合并. 效果图如下: 还有一 ...
layui表格单元格样式自定义
layui表格单元格样式自定义在表格渲染完的回调done中操作: 1.匹配行,根据样式进行匹配,可F12查看(最终目的是只匹配到数据行) 2.匹配列,匹配成功后,就可以确定到某个单元格,获取行对应的 ...
iview table 求和_iView table 实现单元格合并
前言当前问题使用的ivew 版本:3.4.2 后续版本可能会实现相关功能,请留意官方文档. 背景最近做的项目使用的是iView框架,有个需求是要对iView的table进行单元格合并,但是iVie ...
表格table及单元格合并
表格table 表格常用标签: table:表格 th:表头 tr:表格行 td:单元格数据注意:boder:1; 给表格加边框. 表格常用CSS样式: boder-collpase:collpas ...
iview table表格单元格的动态合并
1. 需求需要将从后台获取的数据,在前端渲染时,如果同一列相邻的数据相同,则合并成一个单元格. 即: 需要将上图两个单元格合并,成果图如下 2. 问题本项目使用的是iview组件,iview组件也 ...
table表格单元格的合并详解
1.html实现表格 <el-tablemax-height="300":columns="columns":data="tableData&q ...
html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并？数据是循环从数据库里面读取的。...
网页中的展示效果如图所示. 数据是从MongoDB里面读取的,在网页的展示方式是使用swig模板引擎,for循环遍历展示的. 伪代码如下: for info in dbInfo {info.cellV ...

table表格单元格合并，(自定义)

table表格单元格合并，(自定义)相关推荐

最新文章

热门文章