vue-element-admin table element table 自适应内容宽问题

vue-element-admin table element table 自适应内容宽问题

很多情况下，我们的表头是没办法去自定义的，要从后端获取，但是element table又没办法不换行显示。。总之就是显示的很丑

先说第一种：如果我们的表头是从后端获取的
后端给我的数据是这样的

{"code":200,"msg":"成功",
"data":{"total":"5",
"data":[{"log_time":"log_time","os_name":"os_name"},
{"log_time":"1542818760","os_name":"android"},
{"log_time":"1542850680","os_name":"android"},
{"log_time":"1542854160","os_name":"android"},
{"log_time":"1542855780","os_name":"android"},
{"log_time":"1542858900","os_name":"android"}]}}

第一条数据是表头
但表头是不固定的，这只是列举，字段个数也是不固定的，我们用vue-element-admin的表格要重新封装
如下

      sqlquery({ data: this.searchData })
        .then(response => {
          this.options = response.data.data
          this.options2 = Object.assign(response.data.data[0], {})
          this.options.shift()
          this.total = Number(response.data.total)
          loadingInstance.close()
        })
        .catch(() => {
          loadingInstance.close()
        })

先把数据给分开，不然在表格会多出一条数据 sqlquery是我请求的东西
在template table应该这样写

          <el-table :data="options" style="width: 100%" ref="tables" border height="600" class="mt50">
            <el-table-column v-for="(val, key,index) in options2" :key="index" :label="val" :render-header="labelHead">
              <!--  render-header="labelHead" -->
              <template slot-scope="scope">
                {{scope.row[key]}}
              </template>
            </el-table-column>
          </el-table>

重点来了，为什么我们要用 **:render-header=“labelHead”**呢。
来看看element 的解释

render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index })

由此得知，我们的render-header是可以获取label的。这样就好办了。来看看labelHead的方法


labelHead(h, { column, index }) {
      // const l = column.label.length * 2
      const l = this.options[2][column.label].length
      const f = 14 // 每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
      //  CminW = 0
      var CminW
      if (f * l < 150) {
        CminW = 150
      } else {
        CminW = f * l
      }
      column.minWidth = CminW // 字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
      // 然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      return h('div', { class: 'table-head', style: { width: '100%' }}, [
        column.label
      ])
    },

我写了两个const l不知道有没有注意到

 // const l = column.label.length * 2
 因为我们公司的表格内容是比较多的，所以我会用下面的内容来获取宽度，上面的这个是标题，标题字数
      const l = this.options[2][column.label].length

那就说第二种方式，就是我们已经有表格了，但每次变化宽度不一样，这就好办了。在表格最外面加 style=“width: 100%” 就可以了~~

vue-element-admin table element table 自适应内容宽问题

猜你喜欢