当前位置： 首页 > article >正文

antd table表格设置最小宽度，列宽等比例显示

article 2024/11/18 11:00:17

最近ui有个设计稿，表格要求如图：

由于本地antd table列宽column没有设置最小宽度minWidth属性，只有width属性，所以开发时我考虑按照列宽等比例计算后去设置width属性；

一、实现：


1.表头数组中设置minWidth属性，固定列操作栏直接写width属性即可

this.headerArr = [
        {
          dataIndex: 'indexShortName',
          title: '指标名称',
          minWidth: 320,
        },
        {
          dataIndex: 'dataValue',
          title: '最新值',
          minWidth: 120,
          align: 'right',
        },
        { dataIndex: 'unit', title: '单位', minWidth: 80 },
        {
          dataIndex: 'changePrice',
          title: '涨跌',
          minWidth: 100,
          scopedSlots: { customRender: 'changePrice' },
          align: 'right',
        },
        {
          dataIndex: 'chgPercent',
          title: '涨跌幅',
          minWidth: 100,
          scopedSlots: { customRender: 'chgPercent' },
          align: 'right',
        },
        { dataIndex: 'dataDate', title: '数据日期', minWidth: 100 },
        {
          dataIndex: 'action',
          title: '操作',
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
          width: 118,
        },
      ]
二、创建完表头数据后，执行等比例列宽计算获取每列width

1.headerArr:表头数组

2.allwidth:表格所占宽度

3.fixedWidth:所有固定列总宽度
4.excludeList:不用计算的数组，一般保留一列不去设置width,让它自适应即可

//headerArr:要处理的表头，allWidth表格宽度，fixedWidth：固定列宽度，excludeList：排除不需要设置的序列
    autoHeader(headerArr, allWidth, fixedWidth, excludeList) {
      let autoWidth = allWidth - fixedWidth
      let bili = headerArr
        .map((e) => (e.minWidth ? e.minWidth : 0))
        .reduce((a, b) => a + b)
      headerArr.forEach((e, index) => {
        if (!e.fixed) {
          if (excludeList && excludeList.length > 0) {
            if (!excludeList.includes(index)) {
              e.width = autoWidth * (e.minWidth / bili)
            }
          } else {
            e.width = autoWidth * (e.minWidth / bili)
          }
        }
      })
      return headerArr
    },
 三、执行完成后还需添加监听事件，让表格列宽能够自适应并且动态显示滚动条

1.elementResizeDetectorMaker是监听组件，此处监听表格父容器的宽度变化，当宽度>=938时执行计算列宽等比函数，当宽度<938时表格显示横向滚动条，表头数组直接写上width

 //响应页面宽度变化，动态设置表头列宽
      this.erd = elementResizeDetectorMaker()
      this.erd.listenTo(document.querySelector('.wrap'), (element) => {
        console.log('element', element.clientWidth)
        if (element.clientWidth >= 938) {
          this.headerArr = this.autoHeader(
            this.headerArr,
            document.querySelector('.wrap').clientWidth,
            118,
            [0],
          )
          this.ScrollOBJ = {}
        } else {
          this.ScrollOBJ = { x: 938 }
          this.headerArr = [
            {
              dataIndex: 'indexShortName',
              title: '指标名称',
              minWidth: 320,
            },
            {
              dataIndex: 'dataValue',
              title: '最新值',
              width: 120,
              minWidth: 120,
              align: 'right',
            },
            { dataIndex: 'unit', title: '单位', width: 80, minWidth: 80 },
            {
              dataIndex: 'changePrice',
              title: '涨跌',
              width: 100,
              minWidth: 100,
              scopedSlots: { customRender: 'changePrice' },
              align: 'right',
            },
            {
              dataIndex: 'chgPercent',
              title: '涨跌幅',
              width: 100,
              minWidth: 100,
              scopedSlots: { customRender: 'chgPercent' },
              align: 'right',
            },
            {
              dataIndex: 'dataDate',
              title: '数据日期',
              width: 100,
              minWidth: 100,
            },
            {
              dataIndex: 'action',
              title: '操作',
              align: 'center',
              fixed: 'right',
              scopedSlots: { customRender: 'action' },
              width: 118,
            },
          ]
        }
      })
四、全部代码如下：
<template>
  <div class="wrap">
    <a-table
      class="myTable"
      :class="{ 'empty-table': !tableArr.length }"
      id="define-table"
      :columns="headerArr"
      :data-source="tableArr"
      :locale="tablenodata"
      :loading="loading"
      :scroll="ScrollOBJ"
      :pagination="false"
      v-if="tableReash"
    >
      <template slot="changePrice" slot-scope="text, record">
        <span
          :style="{
            color:
              record.changePrice > 0
                ? '#E25454'
                : record.changePrice < 0
                ? '#12A96E'
                : ''
          }"
          >{{ record.changePrice }}</span
        >
      </template>
      <template slot="chgPercent" slot-scope="text, record">
        <span
          :style="{
            color:
              record.chgPercent > 0
                ? '#E25454'
                : record.chgPercent < 0
                ? '#12A96E'
                : ''
          }"
          >{{
            record.chgPercent > 0
              ? "+" + record.chgPercent + "%"
              : record.chgPercent + "%"
          }}</span
        >
      </template>
      <template slot="action" slot-scope="text, record">
        <span class="add-code" @click="addCode(record)"
          ><span class="add-code-img"></span>添加指标</span
        >
      </template>
    </a-table>
  </div>
</template>
<script>
import { Table } from "ant-design-vue";
import noResult from "@/components/no-result.vue";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  components: {
    ATable: Table,
    "no-result": noResult
  },
  data() {
    return {
      loading: false,
      headerArr: [],
      tableArr: [],
      ScrollOBJ: {},
      tradingDay: "",
      updateTime: "",
      commonHeight: "",
      tablenodata: {
        emptyText: <no-result title="暂无数据" size="small"></no-result>
      },
      tableReash: true,
      marginTopPx: 90
    };
  },
  mounted() {
    this.ScrollOBJ =
      document.querySelector(".wrap").clientWidth >= 938 ? {} : { x: 938 };
    this.setHeader();
    //this.setScrollY()
    //响应页面宽度变化，动态设置表头列宽
    this.erd = elementResizeDetectorMaker();
    this.erd.listenTo(document.querySelector(".wrap"), element => {
      console.log("element", element.clientWidth);
      if (element.clientWidth >= 938) {
        this.headerArr = this.autoHeader(
          this.headerArr,
          document.querySelector(".wrap").clientWidth,
          118,
          [0]
        );
        this.ScrollOBJ = {};
      } else {
        this.ScrollOBJ = { x: 938 };
        this.headerArr = [
          {
            dataIndex: "indexShortName",
            title: "指标名称",
            minWidth: 320
          },
          {
            dataIndex: "dataValue",
            title: "最新值",
            width: 120,
            minWidth: 120,
            align: "right"
          },
          { dataIndex: "unit", title: "单位", width: 80, minWidth: 80 },
          {
            dataIndex: "changePrice",
            title: "涨跌",
            width: 100,
            minWidth: 100,
            scopedSlots: { customRender: "changePrice" },
            align: "right"
          },
          {
            dataIndex: "chgPercent",
            title: "涨跌幅",
            width: 100,
            minWidth: 100,
            scopedSlots: { customRender: "chgPercent" },
            align: "right"
          },
          {
            dataIndex: "dataDate",
            title: "数据日期",
            width: 100,
            minWidth: 100
          },
          {
            dataIndex: "action",
            title: "操作",
            align: "center",
            fixed: "right",
            scopedSlots: { customRender: "action" },
            width: 118
          }
        ];
      }
      this.tableReash = false;
      console.log("this.ScrollOBJ", this.ScrollOBJ);
      this.$nextTick(() => {
        this.tableReash = true;
      });
    });
  },
  methods: {
    //上游价格指数--设置表头
    setHeader() {
      this.headerArr = [
        {
          dataIndex: "indexShortName",
          title: "指标名称",
          minWidth: 320
        },
        {
          dataIndex: "dataValue",
          title: "最新值",
          minWidth: 120,
          align: "right"
        },
        { dataIndex: "unit", title: "单位", minWidth: 80 },
        {
          dataIndex: "changePrice",
          title: "涨跌",
          minWidth: 100,
          scopedSlots: { customRender: "changePrice" },
          align: "right"
        },
        {
          dataIndex: "chgPercent",
          title: "涨跌幅",
          minWidth: 100,
          scopedSlots: { customRender: "chgPercent" },
          align: "right"
        },
        { dataIndex: "dataDate", title: "数据日期", minWidth: 100 },
        {
          dataIndex: "action",
          title: "操作",
          align: "center",
          fixed: "right",
          scopedSlots: { customRender: "action" },
          width: 118
        }
      ];
      this.tableArr = [
        {
          indexShortName: "Mysteel普钢价格指",
          dataValue: "3590.14",
          unit: "元/吨",
          changePrice: "5.87",
          chgPercent: "0.16",
          dataDate: "2024/10/28",
          indexCode: "ID20128188"
        },
        {
          indexShortName: "Mysteel普钢价格指",
          dataValue: "3590.14",
          unit: "元/吨",
          changePrice: "5.87",
          chgPercent: "0.16",
          dataDate: "2024/10/28",
          indexCode: "ID20128188"
        },
        {
          indexShortName: "Mysteel普钢价格指",
          dataValue: "3590.14",
          unit: "元/吨",
          changePrice: "-5.87",
          chgPercent: "-0.16",
          dataDate: "2024/10/28",
          indexCode: "ID20128188"
        },
        {
          indexShortName: "Mysteel普钢价格指",
          dataValue: "3590.14",
          unit: "元/吨",
          changePrice: "-5.87",
          chgPercent: "-0.16",
          dataDate: "2024/10/28",
          indexCode: "ID20128188"
        },
        {
          indexShortName: "Mysteel普钢价格指",
          dataValue: "3590.14",
          unit: "元/吨",
          changePrice: "5.87",
          chgPercent: "0.16",
          dataDate: "2024/10/28",
          indexCode: "ID20128188"
        },
        {
          indexShortName: "Mysteel普钢价格指",
          dataValue: "3590.14",
          unit: "元/吨",
          changePrice: "5.87",
          chgPercent: "0.16",
          dataDate: "2024/10/28",
          indexCode: "ID20128188"
        }
      ];
      this.tableArr = [...this.tableArr, ...this.tableArr];
      //表头按比例设置宽度
      this.headerArr = this.autoHeader(
        this.headerArr,
        document.querySelector(".wrap").clientWidth,
        118,
        [0]
      );
    },
    //headerArr:要处理的表头，allWidth表格宽度，fixedWidth：固定列宽度，excludeList：排除不需要设置的序列
    autoHeader(headerArr, allWidth, fixedWidth, excludeList) {
      let autoWidth = allWidth - fixedWidth;
      let bili = headerArr
        .map(e => (e.minWidth ? e.minWidth : 0))
        .reduce((a, b) => a + b);
      headerArr.forEach((e, index) => {
        if (!e.fixed) {
          if (excludeList && excludeList.length > 0) {
            if (!excludeList.includes(index)) {
              e.width = autoWidth * (e.minWidth / bili);
            }
          } else {
            e.width = autoWidth * (e.minWidth / bili);
          }
        }
      });
      return headerArr;
    }
  }
};
</script>
<style lang="less" scoped></style>


http://www.kler.cn/a/398594.html

相关文章：

  • 01.02、判定是否互为字符重排
  • 性能高于Transformer模型1.7-2倍，彩云科技发布基于DCFormer架构通用大模型云锦天章
  • 【论文复现】STM32设计的物联网智能鱼缸
  • 30-集群Backup Restore
  • go环境搭建
  • 图形 2.6 伽马校正
  • 26-ES集群搭建、身份认证配置
  • 【leetcode】704. 二分查找
  • 力扣 多数元素-169
  • 基于python Django的boss直聘数据采集与分析预测系统，爬虫可以在线采集，实时动态显示爬取数据，预测基于技能匹配的预测模型
  • css三角制作（二十课）
  • 【html网页页面002】html+css制作实现家乡江苏网页主题制作（5页面附效果图）
  • 2024-11-17 -MATLAB三维绘图简单实例
  • 发布 npm 包推送到官方库时 提示 connect ETIMEDOUT
  • 24首届数证杯（流量分析部分）
  • EM算法与高斯混合聚类：理解与实践
  • QT使用libssh2库通过密匙实现sftp协议上传文件
  • 【UE5】在材质Custom写函数的方法
  • UniAPP快速入门教程（一）
  • 目标检测评估指标详解
  • Nature Communications 基于触觉手套的深度学习驱动视触觉动态重建方案
  • 算法日记 26-27day 贪心算法
  • 基于STM32F103的秒表设计-液晶显示
  • 什么是JSX?
  • STM32设计的物联网智能鱼缸
  • 【数据结构】【线性表】【练习】删除链表倒数第n个结点