iview table组件固定列的宽度不能自适应，现在要求固定列按钮超过三个就收起列变窄，按钮不超过3个就平铺水平展示

紫微前端

已于 2023-11-06 14:22:55 修改

阅读量419

点赞数

CC 4.0 BY-SA版权

分类专栏：常用代码片段文章标签： view design

于 2023-11-06 10:10:47 首次发布

本文链接：https://blog.csdn.net/liuhao9999/article/details/134240172

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍了在使用iview UI库的Table组件时，如何处理固定列宽度无法自适应的问题。特别是当列内按钮数量超过三个时，如何实现自动收起列并变窄显示，而在按钮数量少于或等于三个时，让按钮水平平铺展示。通过定制样式和JavaScript逻辑，达到了灵活调整列宽和按钮展示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

    <link rel="stylesheet" type="text/css" href="iview.css" />


    <script src="/https/blog.csdn.net/vue.js"></script>
    <script src="iview.js"></script>

    <title>合同应收款列表</title>
    <style>
        .form-group {
            width: auto !important;
            margin-bottom: 10px;
        }
        
        .ivu-table-header th {
            text-align: center !important;
        }
        
        .popBtnCon {
            padding: 10px 0px;
            text-align: center;
        }
    </style&

了解本专栏