vue vxe-table自适应表格内容宽度

太过爱你忘了你带给我的痛 2024-03-16 18:40 59阅读 0赞

学习自

> [https://www.cnblogs.com/huangxiaoxue/p/12034326.html][https_www.cnblogs.com_huangxiaoxue_p_12034326.html]

<vxe-table
            border
            resizable
            round
            height="100%"
            highlight-hover-row
            align="center"
            :data="tableData"
          >
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
            <vxe-table-column
              v-for="(item, index) in dealtableColumn"
              :key="item.id"
              :field="item.field"
              :title="item.title"
              :width="item.width"
            ></vxe-table-column>
          </vxe-table>

请求后端获取tableData数据，根据表头字段获取对应tableData数据中相应字段的最长内容，设置表头宽度  
值得注意的坑是：vxe-table的宽度只能接受整数值

export default {
        
      data() {
        
        return {
        
          tableData:[],
          dealtableColumn: [],
          tableColumn: [
            {
        
              title: "户号",
              field: "consNo",
            },
            {
        
              title: "户名",
              field: "consName",
            },
            {
        
              title: "地市",
              field: "ds",
            }
          ],
        };
      },
      watch: {
        
        tableData(valArr) {
        
          this.dealtableColumn = this.tableColumn.map((item) => {
        
            const arr = valArr.map((val) => val[item.field]); // 获取每一列的所有数据
            arr.push(item.title); // 把每列的表头也加进去算
            item.width = Math.round(this.getMaxLength(arr) + 40) + "px"; // 每列内容最大的宽度 + 表格的内间距(依据实际情况而定)
            return item;
          });
        },
      },
      methods: {
        
        // 遍历列的所有内容，获取最宽一列的宽度
        getMaxLength(arr) {
        
          return arr.reduce((acc, item) => {
        
            if (item) {
        
              let calcLen = this.getTextWidth(item);
              if (acc < calcLen) {
        
                acc = calcLen;
              }
            }
            return acc;
          }, 0);
        },
        // 获取文本宽度
        getTextWidth(str) {
        
          let width = 0;
          let span = document.createElement("span");
          span.innerText = str;
          document.querySelector("body").appendChild(span);
          width = span.getBoundingClientRect().width;
          span.remove();
          return width;
        },
      },
    };

[https_www.cnblogs.com_huangxiaoxue_p_12034326.html]: https://www.cnblogs.com/huangxiaoxue/p/12034326.html