perf(table): 新增 row 行单击 row-double 行双击事件

This commit is contained in:
就眠仪式
2021-11-05 01:02:48 +08:00
parent 3c9851844f
commit 01851fd3ac
5 changed files with 44 additions and 14 deletions

View File

@@ -13,7 +13,7 @@ import { ref } from 'vue'
export default {
setup() {
const src = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
const src = ref("https://portrait.gitee.com/uploads/avatars/user/30/92529_sentsin_1578917144.jpg")
return {
src
@@ -40,7 +40,7 @@ export default {
setup() {
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
const src = "https://portrait.gitee.com/uploads/avatars/user/30/92529_sentsin_1578917144.jpg"
return {
src
@@ -69,7 +69,7 @@ import { ref } from 'vue'
export default {
setup() {
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
const src = "https://portrait.gitee.com/uploads/avatars/user/30/92529_sentsin_1578917144.jpg"
return {
src

View File

@@ -195,7 +195,7 @@ export default {
::: demo
<template>
<lay-table :columns="columns" id="id" :dataSource="dataSource" v-model:selectedKeys="selectedKeys" :checkbox="checkbox" :default-toolbar="defaultToolbar">
<lay-table :columns="columns" id="id" :dataSource="dataSource" v-model:selectedKeys="selectedKeys" :checkbox="checkbox" :default-toolbar="defaultToolbar" @row="rowClick" @row-double="rowDoubleClick">
<template v-slot:toolbar>
<lay-button size="sm">新增</lay-button>
<lay-button size="sm">删除</lay-button>
@@ -247,12 +247,22 @@ export default {
{id:"2", username:"woow", password:"woow", age:"20"}
]
const rowClick = function(data) {
alert(JSON.stringify(data))
}
const rowDoubleClick = function(data) {
alert(JSON.stringify(data))
}
return {
columns,
dataSource,
selectedKeys,
checkbox,
defaultToolbar
defaultToolbar,
rowClick,
rowDoubleClick
}
}
}
@@ -264,20 +274,29 @@ export default {
:::
| 属性 | 描述 | 可选值 |
| 属性 | 描述 | 可选值 |
| ------------------------ | ---------- | -------------- |
| columns | 列配置 | -- |
| dataSource | 数据源 | -- |
| columns | 列配置 | -- |
| dataSource | 数据源 | -- |
| checkbox | 开启复现框 | -- |
| id | 主键 | -- |
| selectedKeys ( v-model ) | 选中项 | -- |
| default-toolbar | 开启工具栏 | `lg` `md` `sm` |
| size | 尺寸 | -- |
::: title table slots
::: title 表格事件
:::
| | | |
| 属性 | 描述 | 参数 |
| ------------------------ | ---------- | -------------- |
| row | 行单击 | data : 当前行 |
| row-double | 行双击 | data : 当前行 |
::: title 表格插槽
:::
| 插槽 | 描述 | 默认 |
| ------- | ------------ | --- |
| toolbar | 自定义工具栏 | -- |

View File

@@ -11,7 +11,7 @@
<template>
<lay-timeline>
<lay-timeline-item title="0.2.3">
[新增] useFullScreen 全屏 hooks。<br>
[新增] table 表格 row 行单击, row-double 行双击事件。<br>
</lay-timeline-item>
<lay-timeline-item title="0.2.2">
[新增] useFullScreen 全屏 hooks。<br>