a-table 鼠标滑过显示小手,当前行可点击

需求:鼠标滑过表单行时,出现小手,点击时,可以跳转至编辑页
文档地址:https://antdv.com/components/table-cn/
实践操作:
<template>
    <a-table
      :loading="loading"
      :columns="columns"
      :data-source="dataSource.list"
      rowKey="Id"
      :pagination="paginationSet"
      :locale="locale"
      v-if="!cardloading"
      :customRow="click"  // 关键点
    >
    <!-- 业务内容 -->
    </a-table>
</template>
<script>
 export default {
    methods: {
      toEdit (Id) {
        this.$router.push({ path: '/route/EditRoute', query: { pId: Id } })
      },
      click (record, index) {
        return {
          style: {
            'cursor': 'pointer'
          },
          on: {
            click: () => {
              console.log(record, index)
              this.toEdit(record.Id)
            }
          }
        }
      }
    }
 }
</script>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用以下方式来实现鼠标过 el-table 表格时展开和关闭的效果: 1. 在 el-table 组件中添加 :row-class-name="tableRowClassName" 属性,它会为每一添加一个 class 名称,用于自定义该的样式。 2. 在 Vue 实例中定义 tableRowClassName 方法,它会根据数据和索引返回一个 class 名称,用于控制该的样式。在这个方法中,你可以判断当前是否展开,如果是则返回一个特定的 class 名称,否则返回空字符串。 3. 在 el-table 组件中添加 @mouseenter 和 @mouseleave 事件监听器,用于在鼠标过和离开表格时触发相应的方法。 4. 在 Vue 实例中定义 handleRowMouseEnter 和 handleRowMouseLeave 方法,它们会根据传入的索引和事件类型来展开或关闭该。 下面是一个示例代码: ```html <el-table :data="tableData" :row-class-name="tableRowClassName" @mouseenter="handleRowMouseEnter" @mouseleave="handleRowMouseLeave"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> ``` ```javascript export default { data() { return { tableData: [ { name: 'John', age: 20, expanded: false }, { name: 'Mary', age: 25, expanded: false }, { name: 'Tom', age: 30, expanded: false } ] } }, methods: { tableRowClassName({ row }) { return row.expanded ? 'expanded-row' : '' }, handleRowMouseEnter(index) { this.expandRow(index) }, handleRowMouseLeave(index) { this.collapseRow(index) }, expandRow(index) { this.$set(this.tableData[index], 'expanded', true) }, collapseRow(index) { this.$set(this.tableData[index], 'expanded', false) } } } ``` 在上面的代码中,我们在表格数据中添加了一个 expanded 属性来标记每是否展开。在 tableRowClassName 方法中,我们根据该属性返回了一个特定的 class 名称,用于控制的样式。 在 handleRowMouseEnter 和 handleRowMouseLeave 方法中,我们根据传入的索引来调用 expandRow 或 collapseRow 方法,从而展开或关闭该。在这些方法中,我们使用 Vue.set 方法来更新 tableData 中的数据,以便触发响应式更新。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值