根據(jù)業(yè)務(wù)需求，工作中會(huì)出現(xiàn)表頭信息不固定，根據(jù)后臺(tái)返回?cái)?shù)據(jù)，我們要實(shí)現(xiàn)動(dòng)態(tài)表格的實(shí)現(xiàn)
1. tableData為表格數(shù)據(jù)，tableHeader為表頭數(shù)據(jù)。
<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. 實(shí)現(xiàn)表頭自適應(yīng)寬度（二種方法）
? ? ① 第一種通過動(dòng)態(tài)width來定義，通過表頭數(shù)據(jù)的遍歷，將label的表頭信息傳入方法中
????????el-table-column 添加?:width="columnCount(xxxx)"
const columnCount = (label) => {
let labelLong = label.length // 獲取標(biāo)題字?jǐn)?shù)的長(zhǎng)度
if(labelLong < 3) { //標(biāo)題字?jǐn)?shù)3個(gè)以下的寬度設(shè)為一致，或可依產(chǎn)品再修改
labelLong = 3
}
let size = 28 // 定義一個(gè)標(biāo)尺
let labelWidth = labelLong * size // 最終寬度
return labelWidth
}效果如下：
????② 第二種通過element-ui的table-column提供的render-header對(duì)標(biāo)題進(jìn)行render渲染。
這個(gè)地方值得注意的是：由于這個(gè)地方要使用h函數(shù)，如果你使用的是vue2搭配element ui，可以通過第一個(gè)參數(shù)傳入h函數(shù)；如果使用的是vue3搭配elelment-plus，由于該版本去除了h函數(shù)的引入，我們需要從外部進(jìn)行引入使用
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長(zhǎng)度
if(column.label.length < 3) {
labelLong = 3
}
let size = 30 // 根據(jù)需求定義一個(gè)字體的標(biāo)尺
column.minWidth = labelLong * size
//@ts-ignore
return h('div',{style: { width: '100%!important' }},[column.label])
}這個(gè)地方我采用的vue3的模式，可以通過引入h函數(shù)渲染。文章來源：http://www.zghlxwxcb.cn/news/detail-617183.html
如果產(chǎn)品又出了一些其他需求，如添加標(biāo)題添加單選框等，都可以通過h函數(shù)渲染實(shí)現(xiàn)。文章來源地址http://www.zghlxwxcb.cn/news/detail-617183.html
到了這里，關(guān)于Vue+Element ui動(dòng)態(tài)表格 實(shí)現(xiàn)表頭自適應(yīng)寬度的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
