动态设置el-table操作列的宽度自适应

这篇具有很好参考价值的文章主要介绍了动态设置el-table操作列的宽度自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

更新说明:修正操作项变更后,table不刷新问题,升级vue3+elment plus table示例

一、问题

用el-table组件开发时,对于表格的操作列的自适应宽度是一个问题,如果不设置,操作按钮多时会有换行问题。如果设置最小宽度或宽度时,又会出现当条件不满足时,按钮显示的少,但操作列的宽度太宽,显示多余的空白。尤其对于字段较多,操作列固定情况下,现得特别浪费空间。

宽度不足情况

动态设置el-table操作列的宽度自适应

宽度充足但条件不足情况

动态设置el-table操作列的宽度自适应

期望情况

操作列可以根据按钮情况自适应宽度,按钮少时宽度变小,按钮多时自动增加宽度。
动态设置el-table操作列的宽度自适应
动态设置el-table操作列的宽度自适应

二、解决方案

网上查了一下对列内容的自适应的方案较多,但对操作列的自适应却没有找到相关的方案。不过按照内容自适应的方案的原理,本人实现了一下,发现可以解决。

思路

通过CSS的 white-space: nowrap; display: inline-block设置内容不换行,然后计算div的宽度来重新设置列头属性,
依赖属性:

  • CSS:white-space: nowrap; display: inline-block
  • Table-column Attributes:render-header:列标题 Label 区域渲染使用的 Function

代码示例

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :border="true" fit>
      <el-table-column type="index" width="50" label="No" fixed> </el-table-column>
      <el-table-column prop="date" label="日期" width="150" fixed> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="province" label="省份" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" minWidth="260"> </el-table-column>
      <el-table-column prop="zip" label="邮编" minWidth="120"> </el-table-column>

      <el-table-column label="操作" fixed="right" :render-header="renderHeader" :key="Math.random()">
        <template slot-scope="scope">
          <div class="optionDiv" style="white-space: nowrap; display: inline-block">
            <el-button type="text" size="small"> 新增 </el-button>
            <el-button type="text" size="small"> 编辑 </el-button>
            <el-button v-if="scope.row.type == 2 || scope.row.type == 3" type="text" size="small"> 移除 </el-button>
            <el-button v-if="scope.row.type == 2 || scope.row.type == 3" type="text" size="small"> 详情 </el-button>
            <el-button v-if="scope.row.type == 3 || scope.row.type == 3" type="text" size="small"> 下发 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          type: 1
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          type: 2
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          type: 3
        }
      ]
    };
  },
  methods: {
    // 表头部重新渲染
    renderHeader(h, { column, $index }) {
      // 获取操作按钮组的元素
      const opts = document.getElementsByClassName('optionDiv');
      let widthArr = [];
      // 取操作组的最大宽度
      Array.prototype.forEach.call(opts, function (item) {
        if (item.innerText) {
          widthArr.push(item.offsetWidth);
        }
      });
      // 重新设置列标题及宽度属性
      if (widthArr.length > 0) {
        column.width = Math.max(...widthArr) + 24;
        return h('span', column.label);
      } else {
        column.width = 0;
        return h('span', column.label);
      }
    }
  }
};
</script>

最终效果

分别为两列、三列和四列操作的展示效果
动态设置el-table操作列的宽度自适应文章来源地址https://www.toymoban.com/news/detail-503187.html

到了这里,关于动态设置el-table操作列的宽度自适应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element el-table高度自适应

    mainHeightMixins.js @/lib/tools 系统页面引用

    2024年02月16日
    浏览(37)
  • el-table自适应列宽实现

    动态计算 效果图:

    2024年02月10日
    浏览(35)
  • element-ui表格高度自适应(el-table 自适应高度)

    想让element-ui的表格 el-table 出现滚动条的时候,如果不做处理就只能是 height=“XXXpx”,给它一个固定的高度,我们的页面正常情况下,是不允许出现页面级滚动条的,也是不美观的,想让table自适应高度并且有滚动条,而且不会出现页面级滚动条,可以这么实现,下面是我写

    2024年01月17日
    浏览(52)
  • el-table添加固定高度height后高度自适应

    新建目录src/directive/el-table 在el-table目录下新建文件adaptive.js 在el-table目录下新建index.js 在所需使用的vue页面中引入 import adaptive from ‘…/…/…/src/directive/el-table’ 在main.js中引入 在el-table标签中添加属性 v-adaptive:自定义指令,bottomOffset 代表距离底部的距离 height:高度属性,

    2024年02月08日
    浏览(44)
  • element-ui的el-table属性修改,如内边框,斑马纹,列宽度...

    el-table :data=\\\"tableData\\\" style=\\\"width: 100%\\\" border el-table-column prop=\\\"date\\\" label=\\\"日期\\\" width=\\\"180\\\"   /el-table-column el-table-column prop=\\\"name\\\" label=\\\"姓名\\\" width=\\\"180\\\" /el-table-column el-table-column prop=\\\"address\\\" label=\\\"地址\\\" /el-table-column /el-table 这个用来取消表格里面td的边框 ::v-deep .el-table__row td {   /* 去除表格

    2024年02月12日
    浏览(49)
  • 【Vue】【ElementUI】关于el-table的自适应行高设定

    网上好多设置el-table高度和行高的方法,主要是用elementui文档里这几个参数: 我直接用css设置了el-table的高度,主要是为了自适应,百分比根本不管用,所以用vh单位: 行高之前用了 cell-style ,有一个问题是它只能用px单位,设置了之后改分辨率或者换浏览器大小就不一致了,

    2024年02月15日
    浏览(64)
  • Element-UI el-table高度不固定,自适应高度显示滚动条

    表格内容过多时显示滚动条:可通过 max-height设置一个固定的数值高度实现,但是项目中的需求是表格的高度不能写死,要自适应高度来显示滚动

    2024年02月11日
    浏览(58)
  • Element-Puls Form表单内嵌套el-table表格,根据表格复选框多选或单选动态设置行的验证规则

    根据 Table 表格内的复选框来控制当前选中行是否添加必填校验规则 我们需要设置一个 flag 来标识已勾选的行,el-table渲染数据结构是数组对象形式,我们可以在每个对象中手动加如一个标识,例如默认:selected : false,如你的源数据中已有类似key,则可用它作于唯一标识 htm

    2024年02月02日
    浏览(60)
  • el-ment ui 表格组件table实现列的动态插入功能

    在实际需求中我们经常遇到各种奇葩的需求,不足为奇。每个项目的需求各不相同,实现功能的思路大致是一样的。 本文来具体介绍怎么实现table表格动态插入几列。 首先实现思路有2种, 1. 插入的位置如果是已知的,我知道在哪个标题的后面插入这就好办了。  上图可以看

    2024年02月16日
    浏览(37)
  • vue el-table实现动态表头

    众所周知,element-ui中有一个表格组件el-table,用于展示多条结构类似的数据。之前遇到过一个需求,要手动控制el-table的表头显示。就是假如table表格一共有10列数据,可以通过设置勾选,决定显示多少列。 为了代码的复用性,将配置页面单独抽成了组件,所以代码中会有组件

    2024年02月12日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包