Vue + ElementUI el-table动态生成表格(表头含有中文、英文、数字等)，表头宽度自适应实现

表格html片段

  <section class="w-full h-786 overflow-auto"><div class="right-table"><el-tablev-loading="loading"stripesize="small"ref="multipleTableRef":data="totalData.tableData":default-sort="{ prop: 'ModifyTime', order: 'descending' }"height="100%"class="manage-report-table"fit><template v-for="(item, index) in totalData.tableHeader" :key="index"><el-table-column :prop="item.key" :label="item.value" show-overflow-tooltip min-width="80" sortable :width="headSpanFit(item.value)"><template v-slot="{ row }"><!-- 优先级备注 --><divv-if="item.key == 'priority_remake'":class="['one-line','text-ellipsis',row.priority_level == 3 ? 'level-red' : row.priority_level == 2 ? 'level-orange' : row.priority_level == 1 ? 'level-green' : '',]">{{ row.priority_remake }}</div><!-- 状态 --><!-- <div class="complete-state text-ellipsis" v-else-if="item.key == 'test_state'">{{ '完成' }}</div> --><span :class="stateClass[row.test_state]" v-else-if="item.key == 'test_state'"><app-svg-icon class="mr-4 w-20 h-20" v-if="row.test_state === 1" iconName="icon-flash-sm"> </app-svg-icon>{{ formatTestState(row) }}</span><div v-else class="text-ellipsis">{{ row[item.key] }}</div></template></el-table-column></template></el-table></div><!-- 分页 --><div class="pagination-block py-12 flex justify-between overflow-x-auto shadow bg-white border"><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]":small="small":disabled="disabled":background="background"layout="sizes":total="totalData.total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]":small="small":disabled="disabled":background="background"layout="total, prev, pager, next, jumper":total="totalData.total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></section>

第一步：直接在el-table-column上面绑定动态宽度 :width="headSpanFit(item.value)" 传label值

第二步：headSpanFit方法

function headSpanFit(label: any) {let chi = label.replace(/[^\u4E00-\u9FA5]/g, '') //中文let eng = label.replace(/[^a-zA-Z]/g, '') //英文let num = label.replace(/[^\d]/g, '') //数字let size = 20 // 根据需要定义标尺，直接使用字体大小确定就行，也可以根据需要定义//根据表头字符的不同设置长度if (label.length > 1) {// 表头字符长度大于1return chi.length * size * 2 + eng.length * size*2 + num.length * 2 * size } else{// 表头字符长度小于等于1，可能还是会出现宽度不够的情况，适当加宽return chi.length * size * 3 }
}

Vue + ElementUI el-table动态生成表格(表头含有中文、英文、数字等)，表头宽度自适应实现相关推荐

vue 渲染JSON数据动态生成表格组件
vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template><div id="viewDialog"><el-button typ ...
Vue+Element-Ui简单实现动态生成的表格
顾名思义就是根据后端传回来的数据前端来生产不同表头的表格来表现数据: 前端代码如下: <el-table:data="tableData":height="ta ...
python 生成随机数据,随机中文,英文,数字,姓名等
笔者也经常在网上查询信息,但发现很多信息都是照搬,内容甚至有错误,可用性很低.笔者就认为如果要分享就应该把遇到的问题真实的分享出来,让更多同路人少走弯路.节约时间. 觉得这篇文章有帮助的同学可以点个赞 ...
vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
Vue + Element-ui 实现table表格数据相同项合并
Vue + Element-ui 实现table表格数据相同项合并通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
JSTL标签库动态生成表格
项目中遇到一个动态生成表格的问题,由于表格的行和列都不是固定的,而是从数据库中取得的,因此需要动态的创建表格. 由于规范中要求使用JSTL标签库,避免JSP页面冗余java代码,而我的数据库暂时又连不 ...
一段动态生成表格的JSP代码讲解
一段动态生成表格的JSP代码讲解 <table border="1" width="600px" align="center"> ...
应用Java程序片段动态生成表格
通过Jsp页面动态来显示数据库中的数据,在根据条件进行查询时,将调查结果显示在jsp页面中,使用java程序片段(Scriptlet)动态生成表格在jsp文件中,可以在"<%&quo ...

Vue + ElementUI el-table动态生成表格(表头含有中文、英文、数字等)，表头宽度自适应实现

Vue + ElementUI el-table动态生成表格(表头含有中文、英文、数字等)，表头宽度自适应实现相关推荐

最新文章

热门文章