国际化处理Avue或者elment-ui表格的列宽问题

本文主要是介绍国际化处理Avue或者elment-ui表格的列宽问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

主要用于处理国际化多语言，文字长度导致表格宽度变形问题

调用方式如下：

//man.js
import avueUtils from "@/util/avue-utils";
// avue 全局配置
Vue.prototype.$avueUtils = avueUtils;

//elment-ui的表格调用<el-table-column prop="time" :label="" width="80":render-header="$avueUtils.columnFit"></el-table-column>//AVUE表格调用，tableOption是配置项，对配置项进行处理，调用：this.$avueUtils.fit，传入this，和配置对象就好了<avue-crudref="crud":page="page":data="tableData":permission="permissionList":option="tableOption"/>tableOption() {return this.$avueUtils.fit(this,{border: true,menu: this.$store.state.user.userInfo.userType === '1',index: true,height: '100%',indexLabel: this.generateTitle("序号"),stripe: true,menuAlign: "center",align: "center",}

JS封装

/*** 计算列宽度** @param column* @param language*/
function calculateColumnWidth(column, language) {if (!column.label) {return column.minWidth;}// 不同语言不同的字宽度let fontSize;switch (language) {case "zh-CN":fontSize = 17;break;case "en":fontSize = 11;break;case "vi":fontSize = 11;break;}let width = fontSize * (column.label.length + 2);// 如果开启过滤if (column.filters) {width += 12;}// 如果开启排序if (column.sortable) {width += 24;}return width;
}/*** 更新列宽度** @param column* @param language*/
function updateColumnWidth(column, language) {// 记录原始宽度if (column.width && !column._originalWidth) {column._originalWidth = column.width;}column.minWidth = calculateColumnWidth(column, language);// 原设定宽度和计算出的最小列宽度取其高if (column._originalWidth && column.minWidth && column._originalWidth < column.minWidth) {column.width = column.minWidth;} else if (column._originalWidth) {column.width = column._originalWidth;}
}export default {/*** 包装AVue配置，注入全局属性** @param page  当前页面vue实例* @param options AVue配置* @returns {*} 表格配置*/fit(page, options) {let language = page.$store.getters.language;// 序号options.index = true;options.indexLabel = page.generateTitle("序号");// 表格样式options.stripe = true;options.border = true;options.menuAlign = "center";options.align = "center";// 按钮options.refreshBtn = false;options.columnBtn = false;// 空数据options.emptyText = page.generateTitle("暂无数据");// 弹框options.dialogWidth = "80%";// 不同国际化语言特殊处理switch (page.$store.getters.language) {case "zh-CN":options.indexWidth = "70px";break;case "en":options.indexWidth = "120px";break;case "vi":options.indexWidth = "100px";break;}// 列处理if (options.column) {for (let col of options.column) {updateColumnWidth(col, language);col.minWidth = calculateColumnWidth(col, language);}}return options;},/*** 列宽度自适应* 适用于 elementUI 的render-header** @param h* @param data* @returns {*}*/columnFit(h, data) {let page = data._self;let language = page.$store.getters.language;updateColumnWidth(data.column, language);return h("div", {class: "table-head", style: {width: "100%"}}, [data.column.label]);}}

这篇关于国际化处理Avue或者elment-ui表格的列宽问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---