vue原生table合并单元格并可编辑
<template>
<div>
<div class="el-card box-card table_container">
<div class="el-card__header">
<div class="header clearfix">
<span>{{ title }}</span>
<el-button size="small" type="primary" @click="onEdit" class="btn_right" v-if="!isShow">编辑
</el-button>
<el-button size="small" type="primary" @click="onComplete" class="btn_right" v-if="isFinish">完成
</el-button>
</div>
</div>
<div class="el-card__body">
<table class="gridtable" border>
<thead>
<tr>
<th>序号</th>
<th>项目</th>
<th>分类</th>
<th>分项</th>
<th class="w">现场管理</th>
<th class="w">重大隐患</th>
<th class="w">汇总</th>
<th class="w">备注</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td :rowspan="item.idspan" :class="{hidden: item.iddis}">{{ item.id }}</td>
<td :rowspan="item.projectspan" :class="{hidden: item.projectdis}">{{ item.project }}</td>
<td :rowspan="item.typespan" :class="{hidden: item.typedis}">{{ item.type }}</td>
<td>{{ item.subentry }}</td>
<td class="w">
<el-input v-model="item.nowManage" v-if="isShow"></el-input>
<span v-else>{{ item.nowManage }}</span>
</td>
<td class="w">
<el-input v-model="item.Hidden" v-if="isShow"></el-input>
<span v-else>{{ item.Hidden }}</span>
</td>
<td class="w">
<el-input v-model="item.Total" v-if="isShow"></el-input>
<span v-else>{{ item.Total }}</span>
</td>
<td class="w">
<el-input v-model="item.remark" v-if="isShow"></el-input>
<span v-else>{{ item.remark }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title:'风险评估',
isShow:false,
isFinish:false,
tableData: [
{
id:,
project: '企业性质分类',
type: '针对企业类别',
subentry: '生产(危险化学品生产企业)Ⅰ类A、B、C、级',
nowManage: '3.2',
Hidden: '是',
Total:'',
remark:'备注备注'
},
{
id:,
project: '企业性质分类',
type: '针对企业类别',
subentry: '使用(兰炭及配套企业)Ⅱ类A、B、C、级',
nowManage: '3.2',
Hidden: '是',
Total:'',
remark:''
},
{
id:,
project: '企业性质分类',
type: '针对企业类别',
subentry: '储存、经营(加油站)Ⅲ类A、B、C、级C、级',
nowManage: '3.2',
Hidden: '是',
Total:'',
remark:''
},
{
id:,
project: '三同时执行情况',
type: '针对改扩',
subentry: '改扩建未执行',
nowManage: '3.2',
Hidden: '是',
Total:'',
remark:''
}
]
}
},
created() {
this.getData(this.tableData);
},
methods: {
onEdit(){
this.isShow = true
this.isFinish=true
},
onComplete(){
this.isShow = false
this.isFinish=false
},
getData(list){
//console.log(list[0]);
for ( let field in list[]) {
var k = ;
while (k < list.length) {
list[k][field + 'span'] = ;
list[k][field + 'dis'] = false;
for (var i = k + ; i <= list.length - ; i++) {
if (list[k][field] == list[i][field] && list[k][field] != '') {
list[k][field + 'span']++;
list[k][field + 'dis'] = false;
list[i][field + 'span'] = ;
list[i][field + 'dis'] = true;
} else {
break;
}
}
k = i;
}
}
return list;
}
}
}
</script> <style lang="less" scoped>
.mybtn{
margin:10px 0px 0px 10px
}
.btn_right{
float:right
}
.gridtable{
border-collapse:collapse;
width: %;
thead>tr{
background:#eef1f6;
height: 40px;
line-height: 40px
}
th,td {
border: 1px solid #dfe6ec;
font-size: 14px;
font-weight: normal;
}
.w{
width:120px
}
tbody>tr{
height: 50px;
line-height: 50px;
&:hover{
background:#eef1f6;
}
td{
padding: 10px;
} } }
.hidden{
display: none
}
</style>
vue原生table合并单元格并可编辑的更多相关文章
- Vue中table合并单元格用法
<table> <tr> <th>地名</th> <th>结果</th> <th>人名</th> < ...
- css table 合并单元格
1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...
- table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- table合并单元格
table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- ant design Table合并单元格合并单元格怎么用?
1.ant design table合并单元格怎么用?
- BootStrap Table 合并单元格
为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...
- 一种HTML table合并单元格的思路
/** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始).如果传下来为0就是从 ...
- table合并单元格colspan和rowspan .
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
- JQuery Table 合并单元格-解决Bug版本
网络中提供的方法是: <script type="text/javascript"> function _w_table_rowspan(_w_table_id, _w ...
随机推荐
- Oracle角色,权限,表空间基础语句
控制台: -sqlplus -----连接数据库 -conn sys/123456@orcl as sysdba -----登录sys -create tablespac ...
- uboot使用笔记
一.从最基础的uboot开始 首先是打算直接用程序把已有的镜像烧写进去sd卡里面,但是问题来了,烧写不进去 原因: 可能是windows 7的某些版本和win⑩的系统为了保护磁盘,设定了保护等级,直接 ...
- OO第二单元总结之线程大冒险第一关
第二个单元的三次作业均为多线程电梯的设计,旨在让我们能够理解多线程在面向对象设计时的重要意义,并熟练掌握在保证线程安全和性能高效情况下的多线程协同的设计模式——在本次作业中主要体现在生产者-消费者模式 ...
- OO第二单元的总结
三周复三周,一轮又一轮,我似乎已经将OO是为我的生活必须品了.在与同学吐槽者身负-3楼与20楼重任的A电梯君,以及我们都是上一层下两层不用电梯的五号青年的等等欢声笑语中结束了第二轮的OO作业.当然这次 ...
- browser_action' is only allowed for extensions but this is a legacy packaged app
manifest.json中不可包含调试代码: "app": { "launch": { "local_path": ...
- linux-docker下安装禅道全部
友情提示:按照步骤走,99%的人会安装成功,1%的人可以咨询度娘 64位电脑安装禅道,满足发送邮件功能 第一步: docker ps 查看docker中的容器是否有禅道(docker ps -a ...
- npm -g -D -s的区别
npm install module-name 全局安装 npm install module-name -D 即 npm install module-name -save-dev 保存到devD ...
- Javascript学习--BOM操作
1 获取UA(user Agent)用户代理 <!DOCtype html> <html> <head> <title></title> & ...
- 易语言Dns缓存
一些与DNS解析有关的命令: ipconfig/displaydns -查看被缓存的域名解析 ipconfig/flushdns -清空DNS缓存 .版本 .DLL命令 DnsFlushR ...
- AGV
AGV AGV是(Automated Guided Vehicle)的缩写,意即“自动导引运输车”,是指装备有电磁或光学等自动导引装置,它能够沿规定的导引路径行驶,具有安全保护以及各种移载功能的运输车 ...