vue3 element plus table 滚动到指定位置

一. 需求

页面表格数据加载完成之后

计算一下需要滚动的高度

表格自动滚动

二. code

1. 给table加上ref

<el-table ref="tableRef" :data="tableData">...</el-table>

2. 使用nextTick在表格渲染完之后计算高度滚动

import { ref, nextTick } from 'vue'

const tableRefRanking = ref(null);
const tableData = ref([])

const getTableData = async () => {
    isLoading.value = true
    await xxApi({}).then((res) => {xxx})
}

nextTick(async () => {
    await getTableData()
    const rowIndex = tableData.value.findIndex(item => { return item.changeColor == true })
    const yScroll = 36 * rowIndex
    tableRef.value.setScrollTop(yScroll);
})

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现点击指定单元格事件,可以使用 `el-table-column` 组件的 `slot-scope` 属性和 `el-table` 组件的 `@cell-click` 事件配合使用。 下面是一个例子: ```html <template> <el-table :data="tableData" @cell-click="handleCellClick"> <el-table-column prop="name" label="姓名"> <template #default="{row}"> <span @click="handleNameClick(row)">{{row.name}}</span> </template> </el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' } ] } }, methods: { handleCellClick(row, column, cell, event) { console.log('点击了单元格', row, column, cell, event) }, handleNameClick(row) { console.log('点击了姓名', row) } } } </script> ``` 在上面的例子中,我们给 `el-table-column` 的 `default` 插槽绑定了一个点击事件,事件处理函数为 `handleNameClick`。当用户点击姓名单元格时,`handleNameClick` 函数会被触发,同时会将对应的行数据作为参数传递给事件处理函数。在 `handleNameClick` 函数中,我们可以根据需要处理这些参数。 同时,我们也给 `el-table` 组件绑定了 `@cell-click` 事件,事件处理函数为 `handleCellClick`。当用户点击表格中的任意单元格时,`handleCellClick` 函数会被触发,同时会将点击的单元格的行数据、列数据、单元格元素和原始事件对象作为参数传递给事件处理函数。在 `handleCellClick` 函数中,我们可以根据需要处理这些参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值