【vue】avue-crud解决单元格点击事件传递行点击事件

问题:如何在avue-curd表格中的数据添加点击事件(单元格点击事件)

在这里插入图片描述


预期达成的效果为: 点击股东名称执行对应的方法,代码如下

在单元格点击事件上加.stop,防止事件传递

<template>
  <avue-crud ref="crud" :option="option" @row-click="rowClick" :data="data" >
    <template slot-scope="scope" slot="age">
      <div>
        <el-link @click.stop="cellClick">{{ scope.row.age }}</el-link>
      </div>
    </template>
  </avue-crud>
</template>

<script>

export default {
  name: 'demo.vue',
  data() {
    return {
      drawer: false,
      nodes: [],
      openId: [],
      openTitle: '',
      openData: {},
      data: [
        {
          id: 0,
          name: '张三',
          age: '12'
        },
        {
          id: 1,
          name: '李四',
          age: '23'
        }
      ],
      option: {
        menu: false,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        addRowBtn: true,
        cellBtn: false,
        cancelBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name',
            cell: true
          },
          {
            label: '年龄',
            prop: 'age',
            cell: true
          }
        ]
      }
    }
  },
  methods: {
    rowClick(row, column, event) {
      alert('行点击事件')
    },
    cellClick(row, column, cell, event) {
      alert('单元格点击事件')
    }
  }
}
</script>
在使用 Avue-crud 库的时候,如果你想手动触发某个组件的 blur 事件,通常需要通过 Vue事件系统来实现这一需求。Avue-crud 应用了许多原生的 Vue.js API 和特性,允许用户直接控制组件的为。 以下是手动触发 Avue-crud 组件的 `blur` 事件的基本步骤: ### 步骤 1: 获取组件实例 首先,你需要获取到 Avue-crud 实例的引用。这通常是在创建组件时完成的。如果你在 Vue 或者 Vuex 中管理实例的话,你可以像下面这样获取到实例: ```javascript const crudInstance = this.$refs.crud; ``` ### 步骤 2: 触发 blur 事件 一旦你有了组件实例的引用,就可以通过调用 `$emit('blur')` 来手动触发 `blur` 事件了。这通常会在你想要触发事件的时刻执: ```javascript crudInstance.$emit('blur'); ``` ### 示例代码: 假设你有一个名为 `MyCrudComponent.vue` 的 Vue 组件,你可以按照以下方式进设置: ```html <template> <avue-crud ref="crud"></avue-crud> </template> <script> export default { methods: { triggerBlurEvent() { const crudInstance = this.$refs.crud; if (crudInstance) { // 手动触发 blur 事件 crudInstance.$emit('blur'); } } } }; </script> ``` ### 相关问题: 1. 是否可以利用 Vue 的其他生命周期钩子来自动处理 blur 事件? 2. Avue-crud 提供了哪些内置的事件可以响应和自定义? 3. 在特定条件下如何阻止或取消 blur 事件的默认为? 请记住,在实际应用中,你可能需要根据具体情况调整代码,如确保有适当的引用可用,并处理好异步操作,以避免不必要的错误或性能问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值