perf(table): 新增 row 行单击 row-double 行双击事件
This commit is contained in:
就眠仪式
parent
3c9851844f
commit
01851fd3ac
@ -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
|
||||
|
||||
@ -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 | 自定义工具栏 | -- |
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<span @click="handleClick">
|
||||
<span @click.stop="handleClick">
|
||||
<input type="checkbox" :name="name" :value="label" />
|
||||
<div
|
||||
class="layui-unselect"
|
||||
|
||||
@ -19,7 +19,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-table-box">
|
||||
<!-- 表格头部 -->
|
||||
<div class="layui-table-header">
|
||||
<table class="layui-table" :lay-size="size">
|
||||
<thead>
|
||||
@ -46,11 +48,12 @@
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<div class="layui-table-body layui-table-main">
|
||||
<table class="layui-table" :lay-size="size">
|
||||
<tbody>
|
||||
<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">
|
||||
<div class="layui-table-cell laytable-cell-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 slots = slot.default && slot.default()
|
||||
@ -192,6 +195,14 @@ const change = function (page: any) {
|
||||
emit('change', page)
|
||||
}
|
||||
|
||||
const rowClick = function(data: any) {
|
||||
emit('row', data)
|
||||
}
|
||||
|
||||
const rowDoubleClick = function(data: any) {
|
||||
emit('row-double', data)
|
||||
}
|
||||
|
||||
const print = function () {
|
||||
let subOutputRankPrint = document.getElementById('lay-table') as HTMLElement
|
||||
let newContent = subOutputRankPrint.innerHTML
|
||||
|
||||
Loading…
Reference in New Issue
Block a user