接手的项目 vue+bootstrap-table
因为时间问题,需求从展开折叠表格 临时改成了,用行与行颜色区分每一项
async loadlist(data){
this.data = [];
//用来存储需要合并的单元格的位置
var splitArr = [];
let count = 0;
const result = await this.post(url,params);
var resdata = result.data;
for(var index in resdata){
this.data.push(resdata[index]);
//根据判断是否有子元素,判断是否是需求
var subTable = resdata[index].listFtEnquiry;
var length = subTable.length;
if(subTable != undefined){
for(var i = 0; i < length; i++){
//判断是否完成
subTable[i].status == 0?subTable[i]['demandId'] = '×':subTable[i]['demandId'] = '√';
this.data.push(subTable[i]);
}
let rowTogo = 0;
length == 0?rowTogo = 0:rowTogo = length+1;
splitArr.push({index:Number(count),row:rowTogo})
count += 1+length;
}
//渲染表格
$('#table').bootstrapTable('load', this.data);
//根据需求相同的项合并单元格
for(var n = 0 ; n < splitArr.length; n++){
$('#table').bootstrapTable('mergeCells', {index: splitArr[n].index, field: 'operate', rowspan: splitArr[n].row});
}
}
改变某一列的样式,和设置当前的checkbox禁用,我的直接设置样式让他隐藏了,先让他禁用
//columns的写法
{title:'操作',field:'operate',sortable:false,cellStyle:this.setOperatecellstyle},
{checkbox: true,field:'check',formatter :this.checkboxDis},
{title:'需求ID',field:'demandId',sortable:false,cellStyle:this.setDonecellstyle},
//方法的写法:设置操作列的样式 不包括标题
setOperatecellstyle(){
return {css:{color:'#38f',background:'#fff !important'}}
},
//如果需要整个列 包括标题 都改变样式那么写法就是
{title:'操作',field:'operate',sortable:false,class:'liStyle'},
//css样式
//.liStyle{
//}
//如果每一列都根据条件显示不一样的样式,写法就是:
//分了三个样式,当status不存在时没有样式,以及当status为0或者1时 样式也不一样
setDonecellstyle(value, row, index){
if(row.status != undefined){
return row.status == 0?{css: {'color': '#ff0000', 'font-size':"24px",'background':'#F7F7F7'}}:{css: {'color': '#40E0D0', 'font-size':"18px",'font-family': 'cursive','background':'#F7F7F7'}};
}else{
return {css:{}}
}
},
//设置禁用的方法
checkboxDis(value, row, index){
//当这一行有子列时就是需求,则不可用
return row.listFtEnquiry != undefined? {disabled : true,}: {disabled : false,}
}
//再在style里加上一个样式就可以让其隐藏
//input[type=checkbox]:disabled{
// opacity: 0;
//}