草庐IT

【前端vue】element-ui表格fixed操作栏且宽度自适应解决方案

Zeit丶浅白 2023-05-21 原文

element-ui表格fixed操作栏且宽度自适应解决方案

我另一篇文章讲了如何去实现前端的动态路由，以及页面按钮权限控制方案，那么只要会去控制表格内的数据行内操作栏按钮的显示，必然会影响到操作栏宽度的问题。

可能有部分人不知道，element-ui的表格，将某列当做操作栏，并且使其悬浮显示（fixed）,这一列是需要固定宽高的，并不会随着操作栏里面的内容宽度而自动撑大，比如当我本来有7个按钮，宽度也是我设的的宽度，刚好容下这7个按钮，如图
这个使用我给这个页面的按钮权限配置减少几个，这样是不是好丑啊，留白这么大，以为列宽是固定死的嘛

所以，我想了一个办法去实现自动适应列框，因为项目中的操作栏里面的内容都是用插槽（slot）去内嵌的，所有的按钮外面包了一层div，加了个class=“operation”,
并且这个el-table还是被我们封装成的一个组件叫BaseTable.vue，所有页面都共用的这个组件，这就很好办了只要改这个组件就行，说干就干，要自适应列宽，首先我们需要获取到操作栏的内容宽度，因为内容并没有设置宽度，而是有按钮去自动撑开的（需要父级div设置 width: fit-content;），但是有可能每行按钮都不一样的数量，导致内容宽度不一致，所以我们就需要遍历每一行表格的操作栏，并获取其内容宽度，然后把最大的赋值给el-column的width，这样就完成了自适应操作栏列宽。

以下是代码，操作栏的el-column的width绑定了data里面的initWidth

props:{
	tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 是否显示操作栏
    isShowOperate: {
      type: Boolean,
      default: true,
    },
},
data(){
	initWidth:0
},
watch: {
    'tableData': {
      handler(table) {
        this.flexColumnWidth(table.length)
      }, deep: true
    }
},
methods: {
	flexColumnWidth(length) {
		  //isShowOperate:是否显示操作栏，length 表格的数据
	      if (this.isShowOperate && length > 0) {
	        this.$nextTick(() => {
	          const multipleTable = this.$refs.multipleTable
	          //查找出操作栏内带class为operation的dom元素
	          const operations = [...multipleTable.$el.querySelectorAll('.operation')]
	          const newOperations = operations.slice(operations.length / 2, operations.length)
	          let maxValue = 0;
	          newOperations.forEach(item => {
	            if (item.offsetWidth > maxValue) {
	              maxValue = item.offsetWidth
	            }
	          })
	          this.initWidth = maxValue + 20
	        })
	      }
	    }
	 }

这样就实现了操作栏自动适应列宽，希望对小伙伴们有用

自适element-uispanclasstokenvue.js前端ui

有关【前端vue】element-ui表格fixed操作栏且宽度自适应解决方案的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  3. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  6. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  7. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？

  8. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  9. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  10. ruby - 在 Ruby 中是否有一种惯用的方法来操作 2 个数组？ - 2

    a=[3,4,7,8,3]b=[5,3,6,8,3]假设数组长度相同，是否有办法使用each或其他一些惯用方法从两个数组的每个元素中获取结果？不使用计数器？例如获取每个元素的乘积:[15,12,42,64,9](0..a.count-1).eachdo|i|太丑了...ruby1.9.3 最佳答案 使用Array.zip怎么样？:>>a=[3,4,7,8,3]=>[3,4,7,8,3]>>b=[5,3,6,8,3]=>[5,3,6,8,3]>>c=[]=>[]>>a.zip(b)do|i,j|c[[3,5],[4,3],[7,6],

随机推荐