element-ui表格组件的封装（2）

需求#

表头的标题内容过长时在一行内显示，不换行。

实现#

// table.config.js

const tableConfig = {
  // 设置列
  columns: [
    {
      prop: 'date',
      label: '日期as',
      width: '180',
      // 设置固定列
      fixed: true,
      // 设置排序
      sortable: true,
    },
    {
      prop: '',
      label: '配送信息',
      children: [
        {
          prop: 'name',
          label: '姓名aaaaaa',
          width: '100px',
        },
        {
          prop: 'province',
          label: '省份萨达',
        },
        {
          prop: 'city',
          label: '市区',
          minWidth: '200px',
        },
        {
          prop: 'address',
          label: '地址',
          width: '220px',
        },
        {
          prop: 'zip',
          label: '邮编',
        },
      ],
    },
    {
      prop: 'content',
      label: '这里的内容有很多很多哈哈哈哈哈哈哈哈哈',
    },
    {
      prop: '',
      label: '操作',
      //  作用域插槽
      slotName: 'operator',
      width: '120px',
    },
  ],
  // 设置固定表头
  height: '250',
}

export default tableConfig

MyTable.vue

<el-table
      :data="tableData"
      style="width: 100%"
      stripe
      :height="height"
      border
    >
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
        :sortable="item.sortable"
        :show-overflow-tooltip="true"
        align="center"
        :render-header="
          (h, { column, $index }) => labelHead(h, { column, $index }, item)
        "
      >
        <!-- 
        这种形式，可以额外传递其他的参数，方便后续根据前面的参数进行定制化
         :render-header="
          (h, { column, $index }) => labelHead(h, { column, $index }, item)
        "
       -->
        <template slot-scope="scope">
          <slot :name="item.slotName" :row="scope.row">
            {{ scope.row[item.prop] }}
          </slot>
        </template>
        <el-table-column
          v-for="(item2, index2) in item.children"
          :key="item2 + ' ' + index2"
          :prop="item2.prop"
          :label="item2.label"
          :show-overflow-tooltip="true"
          align="center"
          :render-header="
            (h, { column, $index }) => labelHead(h, { column, $index }, item2)
          "
        ></el-table-column>
      </el-table-column>
    </el-table>

export default {
 methods: {
    labelHead: function (h, { column, $index }, item) {
      // console.log(item, column)
      let l = column.label.length
      let f = 16
      column.minWidth = f * (l + 2) //加上一个文字长度

      // 需求:表头自适应
      return h('span', { class: 'table-head', style: { width: '100%' } }, [
        column.label,
      ])
    },
  },
}

效果图#