jeecg-vue3笔记(五)——行内按钮操作

2022-05-27 08:23:05 浏览数 (2)

jeecgboot-vue3使用了vben admin的table以及基于vxetable封装的jvxetable。

两表格都可以通过(操作栏)插槽给表格添加行内按钮,例如编辑、删除等,这些操作需要获取到当前操作行记录,以下为获取方式。

vben

插槽中放入按钮,通过作用域插槽传递行记录。

绑定方法动态获取插槽中按钮

行按钮点击响应方法里获取当前行record记录

jvxetable

插槽及按钮定义。

代码语言:javascript复制
<template #myAction="props">
<a @click="onLookRow(props)">查看

传递的参数包括很多属性。 行按钮点击响应方法里对当前行属性(包括当前单元格、当前行、当前列、jvxetable和vxetable实例)的处理

代码语言:javascript复制
function onLookRow(props) {
  createMessage.success('请在控制台查看输出')
  // 参数介绍:
  // props.value          当前单元格的值
  // props.row            当前行的数据
  // props.rowId          当前行ID
  // props.rowIndex       当前行下标
  // props.column         当前列的配置
  // props.columnIndex    当前列下标
  // props.$table         vxe实例,可以调用vxe内置方法
  // props.target         JVXE实例,可以调用JVXE内置方法
  // props.caseId         JVXE实例唯一ID
  // props.scrolling      是否正在滚动
  // props.triggerChange  触发change事件,用于更改slot的值
  console.log('查看: ', { props })
}

0 人点赞