bootstrap-table常用配置 1.20.2版本（记录一下）

排序、单元格内容自定义、单元格内按钮事件、自定义行样式、单元格点击事件

  <table id="my-bootstrap-table"></table>

页面初始化时对表格进行配置（angular--构造函数前、vue--data() {return {}中） 

let tableData = [
  {
    field: 'executiondatenext',
    title: "下次校验日期",
    sortable: true,  // 是否排序
  },{
    field: 'enclosure',
    width: 200,
    title: '附件',
    // 自定义单元格内容
    formatter: (value, row, index)=>{
      let html = ``
      if(value.length){
        value.map((val,index)=>{
          // 展示最后一条附件的内容
          if(index==value.length-1){  
            html += `
              <div style="display: flex;">
                <input style='width:300px;' type="text" class="form-control input-sm" value="${val.name}" readonly />
                <button id="instr-btn" class="glyphicon glyphicon-download-alt">
                  <a href="/api/stock/download?id=${val.code}">下载</a>
                </button>`
          }
        })
      }
      // 附件数量大于1时，显示弹窗按钮
      if(value.length>1){
        html += `<button id='moreBtn'>更多下载</button>`
      }
	  html += '</div>'
	  return html
    },
    // 按钮点击事件(通过按钮ID，为其添加点击事件)
    events: {
      'click #moreBtn': (e,value,row,index)=>{
        // 弹窗事件
        this.download(value)
	   }
    }
  }
]

对bootstrapTable进行配置 

setTable(){
  // 销毁后，表格才能重新加载
  $('#my-bootstrap-table').bootstrapTable('destroy');
  $('#my-bootstrap-table').bootstrapTable({
    data: this.dataList,
    columns: this.tableData,
    // 表格固定高度(会使表头也固定)
	// height: 530,  // 固定高度会使排序时单元格无法对齐
	// 自定义行样式
	rowStyle: (row,index)=>{
	  return {
	    css: {
          // 字体颜色
		  color: row.color
		}
	  }
	},
	// 单击元点击事件
	onClickCell: (field, value, row, $element)=>{
	  if(field=='enclosure'){
		// console.log(field, value, row, $element);
	  }
	},
  });
}

问题①、bootstrapTable固定表格高度会使点击排序后单元格无法对齐

  方法一：

 解决BootstrapTable设置height属性后，表格不对齐的问题 - 百度文库https://wenku.baidu.com/view/00f667f430d4b14e852458fb770bf78a65293af4.html（采用该方法后表头不固定）

  方法二：

bootstrap-table固定表头后出现的列与表头无法对齐问题_yi往情深的博客-CSDN博客_bootstraptable固定表头对不齐​​​​​​使用bootstap做简单的后台管理框架有丰富插件可以使用，但是在使用bootstap-table插件时发现一个bug，当table需要展示的列比较多后，在使用了固定表头和锁定列后点击分页或排序功能时会出现表头和数据不能对其的问题。具体情境如下1、初次加载没有问题2、然后移动下方的滚动条至右侧3、滚动条在这个位置时，点击下边分页功能或者各列的排序功能时，会出现如下问题表头又重新从起始位置加载了，而下方数据位置未改变，故而无法对齐。分析问题通过调试发现，在固定表头和锁定某些列后bootsthttps://blog.csdn.net/weixin_43995510/article/details/121819026试了这个方法，单元格可以对齐了但会使排序图标不刷新，我在配置里写了个手动修改 

$('#instr-bootstrap-table').bootstrapTable({
  // 点击排序图标时触发（ name: 字段名, order: 排序方式 ）
  onSort: (name, order)=>{
    let dom = $('.sortable');
    let lengths = dom.length/2;
    // 获取点击的表头名称
    let title = this.tableData.filter(val=>val.field==name)[0].title
    for(var i=0; i<lengths; i++){
      if(dom[i].innerText==title){
        // 删除class
        dom[i].removeAttribute('class')
        // 重置class
	    dom[i].setAttribute('class', 'th-inner sortable '+ order)
	  }
	  else{
        // 将其他可排序字段的排序图标重置
	    dom[i].removeAttribute('class')
	    dom[i].setAttribute('class', 'th-inner sortable both')
	  }
    }
  },
})

问题②、实现多层表头：（ 示例 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ）

columns:[
  [{ "title": "饮品", "align": 'center', "colspan": 5 } ],
  [
    {
      field: 'name',
      title: "类型",
      align: 'center',
      colspan: 1,  // 跨列
      rowspan: 2   // 跨行
    },{
      title: "娃哈哈",
      align: 'center',
      colspan: 2,
      rowspan: 1
    },{
      title: "农夫山泉",
      align: 'center',
      colspan: 2,
      rowspan: 1
    }
  ],
  [
    {
      field: 'salesVolume1',
      align: 'center',
      title: '销量',
    },{
      field: 'Proportion1',
      align: 'center',
      title: '占比',
    },{
      field: 'salesVolume2',
      align: 'center',
      title: '销量',
    },{
      field: 'Proportion2',
      align: 'center',
      title: '占比',
    }
  ]
]