根据表格内容长度自适应表格宽度

最新推荐文章于 2024-07-30 17:43:10 发布

xiaoxin6661111

最新推荐文章于 2024-07-30 17:43:10 发布

阅读量709

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/xiaoxin6661111/article/details/128050667

版权

本文介绍如何在Vue.js项目中创建一个util文件夹，存放公共方法table-width.js，用于根据表格内容自动调整表格宽度。在main.js中引入该方法，并在具体表格组件上应用，以实现表格宽度的智能适配。

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

1.在src里面新建util文件，用来存储公用的方法。

将table-width.js放进去

export default {
  flexColumnWidth(str, tableData, flag = "max") {
    // console.log(tableData)
    // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
    // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
    // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
    str = str + "";
    let columnContent = "";
    if (
      !tableData ||
      !tableData.length ||
      tableData.length === 0 ||
      tableData === undefined
    ) {
      return;
    }
    if (!str || !str.length || str.length === 0 || str === undefined) {
      return;
    }
    if (flag === "equal") {
      // 获取该列中第一个不为空的数据(内容)
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i][str].length > 0) {
          // console.log('该列数据[0]:', tab