Vue+Element ui动态表格 实现表头自适应宽度

根据业务需求，工作中会出现表头信息不固定，根据后台返回数据，我们要实现动态表格的实现

1. tableData为表格数据，tableHeader为表头数据。

<el-table :data="tableData" border style="width: 100%" v-loading="loading">
  <el-table-column 
     :render-header="readerColumn" 
      v-for="item in tableHeader" 
      :key="item.id" 
      :prop="item.javasName" 
      :label="item.sourceColMame" 
      align="center" 
      show-overflow-tooltip />
</el-table>

2. 实现表头自适应宽度（二种方法）

① 第一种通过动态width来定义，通过表头数据的遍历，将label的表头信息传入方法中

    el-table-column 添加 :width="columnCount(xxxx)"

const columnCount = (label) => {
  let labelLong = label.length // 获取标题字数的长度
  if(labelLong < 3) {  //标题字数3个以下的宽度设为一致，或可依产品再修改
    labelLong = 3
  }
  let size = 28 // 定义一个标尺
  let labelWidth = labelLong * size // 最终宽度
  return labelWidth
}

效果如下：

② 第二种通过element-ui的table-column提供的render-header对标题进行render渲染。

这个地方值得注意的是：由于这个地方要使用h函数，如果你使用的是vue2搭配element ui，可以通过第一个参数传入h函数；如果使用的是vue3搭配elelment-plus，由于该版本去除了h函数的引入，我们需要从外部进行引入使用

element ui

element plus

<script lang="ts" setup>
import { yibaoBF } from '@/api/HospitalInformation/yibaobofu'
import { xinxiApi } from '@/api/HospitalInformation/Information';
import { h,ref,onMounted,getCurrentInstance} from 'vue'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()

// 定义自定义表头
const readerColumn = ({ column }) => {
  let labelLong = column.label.length // 表头label长度
  if(column.label.length < 3) {
    labelLong = 3
  }
  let size = 30 // 根据需求定义一个字体的标尺
  column.minWidth = labelLong * size
  //@ts-ignore
  return h('div',{style: { width: '100%!important' }},[column.label])
}

这个地方我采用的vue3的模式，可以通过引入h函数渲染。

如果产品又出了一些其他需求，如添加标题添加单选框等，都可以通过h函数渲染实现。