element el-table-column 循环

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

当table中表头太多了,然后不想一个一个写,可以用循环的方式写

先上个图
el-table-column循环,view,element,vue.js,javascript,前端
直接上代码

<el-table :data="tableData">
      <div v-for="(col,ii) in cols" :key="ii">
        <el-table-column v-if="col.prop=='type'" :prop="col.prop" :label="col.label">
          <template scope="scope">
            <el-tag type="primary">{{ scope.row.type == 1 ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-else :prop="col.prop" :label="col.label">
        </el-table-column>
      </div>
    </el-table>


data数据文章来源地址https://www.toymoban.com/news/detail-534032.html

 cols: [
        { label: "节点编号", prop: "node" },
        { label: "名称", prop: "name" },
        { label: "类型", prop: "type" },
        { label: "坐标", prop: "coordinate" }
      ],
      tableData: [
        {
          node: "0051",
          name: " 机库顶",
          type: "1",
          status: "正常",
          coordinate: "12.21,34.45,34.6",
        },
        {
          node: "0061",
          name: "机库门",
          type: "0",
          status: "低电",
          coordinate: "45.41,67.45,78.6",
        },
      ],

到了这里,关于element el-table-column 循环的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • el-image实现在el-table-column中展示多张图片,且能够大图循环预览

    效果:能在表格中展示且点击需要查看的即可放大查看,多组图片放大时可左右切换    核心代码: 注意: workPhoto是图片地址的数组 通过v-for来遍历每个列表的图片地址数组,结合:src=\\\"item\\\"把每个图片展示在表格里,展示图片的大小样式用style来设定 通过:perview-src-list=\\\"getI

    2024年02月05日
    浏览(55)
  • 【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日
    浏览(51)
  • vue el-table-column 修改一整列的背景颜色

    目录 修改表头以及一整列数据的背景颜色,效果如下: 总结 修改表头以及一整列数据的背景颜色,效果如下: 修改表头背景颜色:在el-table绑定header-cell-style 修改一整列的数据背景颜色:在el-table绑定:cell-style=\\\"columnStyle\\\" 完整代码如下: 记录来源于需求,希望能帮助到你~

    2024年02月06日
    浏览(46)
  • 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日
    浏览(99)
  • Vue3 动态列 <el-table-column> 实现 formatter 的两种方法

    参考此篇文章 Vue3 动态列实现 第一种 以此为例:传递该行的wxUserInfo字段(对象)中的nickName 假设该行 {prop: \\\"wxUserInfo\\\", label: \\\"用户昵称\\\", minWidth: \\\"110\\\", align: \\\"center\\\", tooltip: true, resizable: true,}, 第二种方法 个人比较喜欢第二种,简单的东西就不要浪费时间。

    2024年02月13日
    浏览(59)
  • 【Vue】在el-table的el-table-column中,如何控制单行、单列、以及根据内容单独设置样式。例如:修改文字颜色、背景颜色

    用cell-style表属性来实现。在官网中是这样表述这个属性的。    在el-table中用v-bind绑定此属性。(v-bind的简写是:) data中的options数据为: 此时页面显示为:     在methods中声明cellStyle方法。让我们打印出各个参数看一下代表了什么。 控制台打印如下:     其实很好理解,

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

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

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

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

    2024年02月06日
    浏览(42)
  • el-table组件的el-table-column电脑端使用fixed属性固定,移动端不使用固定,怎么实现?

           要在电脑端使用 fixed 固定列,而在移动端不使用,可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码:        在上面的示例中,我们使用 isDesktop 数据属性来判断当前设备是否为电脑端。通过监听窗口的 resize 事件,动态更新 isDesktop 的值。然后

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

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

    2024年02月11日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包