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

最新推荐文章于 2024-08-01 14:22:08 发布

爱睡D小猪

最新推荐文章于 2024-08-01 14:22:08 发布

阅读量949

点赞数 9

分类专栏： Element-ui 文章标签： ui vue.js 前端

本文链接：https://blog.csdn.net/zhouloverbrother/article/details/136376491

版权

Element-ui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章介绍了如何使用AVUE库中的columnFit函数和calculateColumnWidth方法，针对国际化多语言环境，动态调整表格列宽度以适应不同语言下的文字长度，确保表格在不同语言下的显示效果。

摘要由CSDN通过智能技术生成

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

调用方式如下：

//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-crud
        ref="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]);
  }

}