elementui表格纵向-Vue+Elementui动态表格实现表头自适应间距

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

1、tableData是表数据，tableHeader是表头数据。

2.实现表头自适应间距（两种方法）

① 第一个是动态宽度定义的，通过头部数据的遍历，将标签的头部信息传入到方法中

添加 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来渲染标题。

这个地方值得注意：因为这个地方使用了h函数，如果你是使用vue2配合elementuielementui表格纵向，可以通过第一个参数传入h函数； 如果你使用的是vue3配合elelment-plus，因为这个版本不仅仅引入了h函数，我们还需要从外部导入使用

元素

元素加

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模式elementui表格纵向，可以通过引入h函数来渲染。

如果产品还有一些其他需求，比如添加标题、单选按钮等，可以通过h函数渲染来实现。