el-table表格动态高度，以及点击每一行加高亮

最新推荐文章于 2024-04-28 15:34:18 发布
最新推荐文章于 2024-04-28 15:34:18 发布
阅读量850 收藏 12
点赞数 8
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58361435/article/details/136615606
版权 
<template>
  <div class="tody-work-order">
    <div class="top" ref="top">
      <el-table
        :data="topTableData"
        :height="tableHeight"
        v-if="tableHeight"
        :destroy-on-close="true"
        :cell-style="{padding:'0px 0 0px 0', color: '#000'}"
        :header-cell-style="{padding: '0px 0 0px 0', color: '#000'}"
        @row-click="clickData"
        :row-class-name="tableRowClassName"
        style="width: 100%;">
        <el-table-column
          prop="date"
          label="序号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="工序名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="项目WBS">
        </el-table-column>
        <el-table-column
          prop="car"
          label="车型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="carCode"
          label="车号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="lu"
          label="局段"
          align="center">
        </el-table-column>
        <el-table-column
          prop="time"
          label="计划时间"
          width="130"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tody-work-order',
  data () {
    return {
      activeIndex: 0,
      tableHeight: null,
      topTableData: [
        {
          date: '1',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '3',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '4',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '5',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '6',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '7',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        }
      ]
    }
  },
  created () {
    this.getTableHeight()
  },
  mounted () {
    const _this = this
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag)
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight()
        _this.resizeFlag = null
      }, 100)
    }
  },
  methods: {
    // 计算table高度(动态设置table高度)
    getTableHeight () {
      const tableH = 50 // 距离页面下方的高度
      const tableHeightDetil = window.innerHeight - tableH
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300
      } else {
        this.tableHeight = window.innerHeight - tableH
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex // 浅拷贝，让row有index
      if (rowIndex === this.activeIndex) {
        return 'success-row'
      }
    },
    clickData (row) {
      this.activeIndex = row.index
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/el_table.scss';
.tody-work-order {
  @include wh(100%, 100%);
  .top {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid $borderColor;
  }
}
::v-deep .el-table .success-row {
  background: pink !important;
}
</style>

如图：

 

小政爱学习！
关注
  • 8
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
el-table表格动态设置最大高度 高度根据窗口可视高度大小改变自适应
misschengispink的博客
09-13 4122
由于表格内容过多，如果不给高度限制，每页100条数据的情况下，去操作底部的分页或者其他功能都需要划到数据最底部操作，用户体验性较差。解决方法是让表格一屏展示，超出部分滚动展示。
【Vue+ElementUI】el-table动态高度设置及表格内容错乱对不齐
最新发布
sunshineTing2的博客
04-28 2149
el-table动态高度设置及表格内容错乱对不齐
表格通用样式el-table的表头颜色样式，表内边框行高样式，点击行高亮变颜色
weixin_45646663的博客
08-19 1683
:height='400' style="width: 100%" :header-cell-style="{'text-align':'center',background:'rgb(15, 73, 237,.1)',color:'#333333','font-size': '14px','font-family': 'PingFang SC','font-weight': '700','border-color': '#CFDBFB'}" :cell-style="{'text-align':'cen
Element 中的el-table 点击高亮某行
weixin_43268050的博客
08-09 839
项目中封装的table组件没有点击某行高亮显示。在我要写的页面使用element中的。属性可以实现单选效果。可以实现点击高亮显示。
如何给el-table添加选中高亮
m0_47454283的博客
10-04 5244
highlight-current-row的使用
el-table点击高亮当前单元格
u014003643的博客
05-19 2786
vue el-table 点击高亮当前单元格
el-table设置高度自适应，动态设置height
热门推荐
zyynb的博客
02-23 1万+
vue+el-table设置高度自适应，动态设置height
[element-ui] el-table点击高亮当前行
qq_14993591的博客
04-04 1558
2、:row-class-name=“tableRowClassName”，需要借助@row-click="handleRowClick"获取当前点击行的下标。
传入el-table的数据结构
ZQH084811的博客
09-19 785
表格展示 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="n
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
动态计算el-table高度
树上骑个猴的博客
12-22 3832
如果你要求页面内容只能在一屏内显示，不想出现页面竖直滚动条，且页面使用el-table，那么就需要el-table动态计算高度 <el-table v-loading="loading" :data="tableData" :height="tableHeight" ref="table" highlight-current-row > <el-table-column ty
Vue中el-table实现点击某行高亮
2301_77470482的博客
12-06 1420
第一步：el-table添加属性：highlight-current-row。
el-table动态设置高度
weixin_48295815的博客
06-14 2255
当表格数据横向和纵向数据都太多时，我们如果想要横向滑动时，需要拉动到最后才能滑动横向滚动条，并且表头也会看不到，这样很不方便。这时候我们需要给表格设置最大高度：但是表格的数据是不固定的，并且每个人的显示器大小也不固定，那么我们就需要动态计算，2.给el–table设置max-height。1.获取浏览器高度- 其他部分的高度。欢迎各位大佬指教~~
Element-UI el-table点击复选框或点击数据行，当前行高亮显示
weixin_49650314的博客
07-06 6594
Element-UI el-table点击复选框或点击数据行，当前行高亮显示
vue el-table 单机行选中高亮并获取行数据，再次单击取消行选中
lerry的博客
04-13 6015
vue el-table 单机行选中高亮并获取行数据，再次单击取消行选中
el-table 高亮显示选中的行(element-ui)
Major_S的博客
11-02 2631
Table 组件提供了单选的支持， 只需要配置 highlight-current-row 属性即可实现单选。之后由 current-change 事件来管理选中时触发的事件，它会传入 currentRow，oldCurrentRow。如果需要显示索引，可以增加一列 el-table-column，设置 type 属性为 index 即可显示从 1 开始的索引号。选择单行数据时使用色块表示。
vue3 笔记| el-table 控件 选中行高亮 设置选中行样式 获取选中行索引
weixin_47082655的博客
07-20 3166
el-table :row-class-name="tableRowClassName" 加上这句。
el-table初始高亮某一行
05-27
要让 el-table 初始高亮某一行，可以通过设置 `highlight-current-row` 属性来实现。具体方法如下： 1. 在 el-table 组件上添加 `highlight-current-row` 属性： ```html <el-table :data="tableData" highlight-current-row> <!-- 表格列的定义 --> </el-table> ``` 2. 在 el-table 组件上添加 `current-row-key` 属性，并将其绑定到一个变量上，该变量的值为要高亮的行的唯一标识符，比如行的 ID： ```html <el-table :data="tableData" highlight-current-row :current-row-key="currentRowId"> <!-- 表格列的定义 --> </el-table> ``` 3. 在 Vue 实例中定义 `currentRowId` 变量，并将其初始化为要高亮的行的唯一标识符： ```js export default { data() { return { currentRowId: '1' // 要高亮的行的唯一标识符 } } } ``` 这样，当 el-table 组件初始化时，就会自动高亮该行。当然，如果需要动态改变高亮的行，只需要在 Vue 实例中改变 `currentRowId` 变量的值即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值