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

小半 • 2023年2月5日上午10:45 • 技术随笔 • 阅读 246

1.问题示例图

1.点击单元格事件时，同时触发了行点击事件

2.代码示例

1.在单元格点击事件上加.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>