Vue3 动态列 <el-table-column> 实现 formatter 的两种方法

这篇具有很好参考价值的文章主要介绍了Vue3 动态列 <el-table-column> 实现 formatter 的两种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

动态列实现

参考此篇文章 Vue3 动态列实现

动态列实现formatter

第一种

以此为例:传递该行的wxUserInfo字段(对象)中的nickName

  • 假设该行

{prop: "wxUserInfo", label: "用户昵称", minWidth: "110", align: "center", tooltip: true, resizable: true,},

<el-table-column
          v-for="item in showList"
          :label="item.label"
          :key="item.prop"
          :fixed="item.fixed"
          :align="item.align"
          :prop="item.prop"
          :min-width="item.minWidth"
          :width="item.width"
          :show-overflow-tooltip="item.tooltip"
          :resizable="item.resizable"
      >
        <template v-slot="scope" v-if="item.prop == 'wxUserInfo'">
          {{ formatWxUserInfo(scope.row) }}
        </template>
      </el-table-column>
const formatWxUserInfo = (row) => {
  return row.wxUserInfo.nickName;
}

第二种方法

个人比较喜欢第二种,简单的东西就不要浪费时间。文章来源地址https://www.toymoban.com/news/detail-647977.html

      <el-table-column
          v-for="item in showList"
          :label="item.label"
          :key="item.prop"
          :fixed="item.fixed"
          :align="item.align"
          :prop="item.prop"
          :min-width="item.minWidth"
          :width="item.width"
          :show-overflow-tooltip="item.tooltip"
          :resizable="item.resizable"
      >
        <template v-slot="scope" v-if="item.prop == 'wxUserInfo'">
          {{ scope.row.wxUserInfo.nickName }}
        </template>
      </el-table-column>

到了这里,关于Vue3 动态列 <el-table-column> 实现 formatter 的两种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue elementui v-for 循环el-table-column 第一列数据变到最后一个

    这个动态渲染table表格时发现el-table-column 第一列数据变到最后一个 序号被排到后面 代码 修改后

    2024年02月13日
    浏览(36)
  • el-table-column点击事件

    el-table-column 的点击事件是可以通过在 el-table-column 上使用 \\\"cell-click\\\" 或 \\\"header-click\\\" 事件来实现的。具体实现方法如下: 在 el-table-column 上绑定 \\\"cell-click\\\" 事件:

    2024年02月14日
    浏览(44)
  • element el-table-column 循环

    当table中表头太多了,然后不想一个一个写,可以用循环的方式写 先上个图 直接上代码 data数据

    2024年02月13日
    浏览(43)
  • el-table-column 设置表格内居中

    如下代码块,设置属性 align=“center”

    2024年02月06日
    浏览(36)
  • vue中使用element ui的el-table在el-table-column下使用slot插槽v-if条件渲染没生效或者混乱

    vue 引入element ui中的el-table组件时,在el-table-column下使用作用域插槽,通过v-if条件来动态显示某些元素,发现有的条目渲染没生效或者混乱。如: 原因:vue虚拟dom机制,会尽量复用已存在相同节点元素而不会重新渲染,导致使用v-if没有达到预期效果 解决方法:使用div元素将

    2024年02月11日
    浏览(42)
  • element ui中el-table-column进行自定义校验

    最近在工作中遇到了这个需求点击确定时要将表格中的输入框经行校验,记录一下方便以后复用。 有两种方式,第一种是提示的方式, 效果:输入框为空的时候: 效果:点击确定是进行校验:   效果:  代码的思路是这样的 data中需要定义一个用来标记的变量,名字是随便

    2024年02月07日
    浏览(44)
  • 【element UI 中的af-table-column组件】el-table-column如何自适应调整列宽,简单高效!!!

    在element UI框架中,组件el-table-column代表table的一列,有时候我们不想让里面的内容换行,网上的方法一般是需要给自适应列宽的column写一个动态的width,比较麻烦。 af-table-column是基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能 使用前得先导入,对于第二行“V

    2024年02月08日
    浏览(45)
  • element-ui中使用el-table ,el-table-column循环列发现列错乱解决方法

    由于 需要动态循环列展示表格 而不得不 套一层div 标签时会造成表格列错乱的想象,这是因为el-table中不允许有除el-table-column标签以外的元素。 1、 或许你可以试试使用template 标签包裹 2、把div标签删了,不用它包裹 3、再循环前多加一行宽度为1的列 el-table-column 前面的两种方

    2024年02月11日
    浏览(48)
  • elementui el-table-column表头换行,自定义表头以及排序图标的位置放置

    https://www.jb51.net/article/228935.htm // 在需要换行的地方加入换行符 n ,在搭配最底下的white-space样式设置 ⭐️想实现以下效果 ⭐️想实现以下效果 表头文字过长要换行显示,让排序图标位于两行文字右边,居中显示。 现在将解决问题的过程记录一下: 1、首先想到的办法是使用

    2024年02月11日
    浏览(38)
  • Element UI 使用 table 组件设置 el-table-column 宽度width为百分比无效的问题解决方案

    使用 Element el-table 组件时,给列 el-table-column 设置百分比 % 宽度无效( width=\\\"30%\\\" ) Vue中要将 el-table-column 的宽度设置成百分比的话,不能通过设置 width 来实现,而是要设置 min-width ,并且每一列都必须设置 min-width 。 el-table 组件会被 vue 解析成 html ,Vue直接把百分号去掉把数值当

    2023年04月08日
    浏览(77)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包