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

circles_Quan

已于 2022-06-09 11:27:49 修改

阅读量649

点赞数

文章标签： javascript bootstrap

于 2022-06-07 14:26:41 首次发布

本文链接：https://blog.csdn.net/circles_Quan/article/details/125163904

版权

本文介绍了Bootstrap Table的常见配置，如排序、自定义单元格内容、按钮事件、行样式和单元格点击事件。在配置表格高度时遇到单元格对齐问题，提供了两种解决方案：一种可能导致表头不固定，另一种可能使排序图标不刷新。此外，还探讨了如何实现多层表头。

摘要由CSDN通过智能技术生成

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

  <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.n