bootstrap-table那些我遇到的问题

最新推荐文章于 2024-09-28 17:19:16 发布

买个床

最新推荐文章于 2024-09-28 17:19:16 发布

阅读量253

点赞数

分类专栏：前端学习文章标签： js

本文链接：https://blog.csdn.net/longmushasha/article/details/106718685

版权

前端学习专栏收录该内容

35 篇文章 1 订阅

订阅专栏

接手的项目 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;
//}