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 { export default {
setup() { 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 { return {
src src
@ -40,7 +40,7 @@ export default {
setup() { 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 { return {
src src
@ -69,7 +69,7 @@ import { ref } from 'vue'
export default { export default {
setup() { 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 { return {
src src

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<template> <template>
<span @click="handleClick"> <span @click.stop="handleClick">
<input type="checkbox" :name="name" :value="label" /> <input type="checkbox" :name="name" :value="label" />
<div <div
class="layui-unselect" class="layui-unselect"

View File

@ -19,7 +19,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layui-table-box"> <div class="layui-table-box">
<!-- 表格头部 -->
<div class="layui-table-header"> <div class="layui-table-header">
<table class="layui-table" :lay-size="size"> <table class="layui-table" :lay-size="size">
<thead> <thead>
@ -46,11 +48,12 @@
</thead> </thead>
</table> </table>
</div> </div>
<!-- 表格数据 -->
<div class="layui-table-body layui-table-main"> <div class="layui-table-body layui-table-main">
<table class="layui-table" :lay-size="size"> <table class="layui-table" :lay-size="size">
<tbody> <tbody>
<template v-for="data in dataSource" :key="data"> <template v-for="data in dataSource" :key="data">
<tr> <tr @click.stop="rowClick(data)" @dblclick.stop="rowDoubleClick(data)">
<td v-if="checkbox" class="layui-table-col-special"> <td v-if="checkbox" class="layui-table-col-special">
<div class="layui-table-cell laytable-cell-checkbox"> <div class="layui-table-cell laytable-cell-checkbox">
<table-item-checkbox <table-item-checkbox
@ -154,7 +157,7 @@ const props = withDefaults(
} }
) )
const emit = defineEmits(['change', 'update:selectedKeys']) const emit = defineEmits(['change','row','row-double', 'update:selectedKeys'])
const slot = useSlots() const slot = useSlots()
const slots = slot.default && slot.default() const slots = slot.default && slot.default()
@ -192,6 +195,14 @@ const change = function (page: any) {
emit('change', page) emit('change', page)
} }
const rowClick = function(data: any) {
emit('row', data)
}
const rowDoubleClick = function(data: any) {
emit('row-double', data)
}
const print = function () { const print = function () {
let subOutputRankPrint = document.getElementById('lay-table') as HTMLElement let subOutputRankPrint = document.getElementById('lay-table') as HTMLElement
let newContent = subOutputRankPrint.innerHTML let newContent = subOutputRankPrint.innerHTML