feat(table): 初步完成 table 组件
This commit is contained in:
就眠仪式
parent
8f26cfa949
commit
402fb53d8b
@ -1,7 +1,10 @@
|
|||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-table></lay-table>
|
<lay-table :columns="columns" :dataSource="dataSource">
|
||||||
|
<template v-slot:username="{ data }"> {{data.username}} </template>
|
||||||
|
<template v-slot:password="{ data }"> {{data.password}} </template>
|
||||||
|
</lay-table>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -9,7 +12,81 @@ import { ref } from 'vue'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title:"账户",
|
||||||
|
width:"200px",
|
||||||
|
slot:"username",
|
||||||
|
key:"username"
|
||||||
|
},{
|
||||||
|
title:"密码",
|
||||||
|
width: "180px",
|
||||||
|
slot:"password",
|
||||||
|
key:"password"
|
||||||
|
},{
|
||||||
|
title:"年龄",
|
||||||
|
width: "180px",
|
||||||
|
key:"age"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const dataSource = [
|
||||||
|
{username:"root", password:"root", age:"18"},
|
||||||
|
{username:"woow", password:"woow", age:"20"}
|
||||||
|
]
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
columns,
|
||||||
|
dataSource
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-table :columns="columns" :dataSource="dataSource">
|
||||||
|
<template v-slot:username="{ data }"> {{data.username}} </template>
|
||||||
|
<template v-slot:password="{ data }"> {{data.password}} </template>
|
||||||
|
</lay-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title:"账户",
|
||||||
|
width:"200px",
|
||||||
|
slot:"username",
|
||||||
|
key:"username"
|
||||||
|
},{
|
||||||
|
title:"密码",
|
||||||
|
width: "180px",
|
||||||
|
slot:"password",
|
||||||
|
key:"password"
|
||||||
|
},{
|
||||||
|
title:"年龄",
|
||||||
|
width: "180px",
|
||||||
|
key:"age"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const dataSource = [
|
||||||
|
{username:"root", password:"root", age:"18"},
|
||||||
|
{username:"woow", password:"woow", age:"20"}
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
dataSource
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3650,11 +3650,16 @@ a cite {
|
|||||||
|
|
||||||
.layui-table-view .layui-table td,
|
.layui-table-view .layui-table td,
|
||||||
.layui-table-view .layui-table th {
|
.layui-table-view .layui-table th {
|
||||||
padding: 5px 0;
|
padding: 5px 0px;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-left: none
|
border-left: none
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-table-view .layui-table td.layui-table-col-special,
|
||||||
|
.layui-table-view .layui-table th.layui-table-col-special {
|
||||||
|
padding: 5px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
|
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="LAY_preview">
|
<div>
|
||||||
<table class="layui-hide" id="test" lay-filter="test"></table>
|
<table class="layui-hide" id="test" lay-filter="test"></table>
|
||||||
<div
|
<div
|
||||||
class="layui-form layui-border-box layui-table-view layui-table-view-1"
|
class="layui-form layui-border-box layui-table-view layui-table-view-1"
|
||||||
lay-filter="LAY-TABLE-FORM-DF-1"
|
|
||||||
lay-id="test"
|
|
||||||
>
|
>
|
||||||
<div class="layui-table-tool">
|
<div class="layui-table-tool">
|
||||||
<div class="layui-table-tool-self">
|
<div class="layui-table-tool-self">
|
||||||
@ -24,23 +22,12 @@
|
|||||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th
|
<th class="layui-table-col-special">
|
||||||
data-field="0"
|
<div class="layui-table-cell laytable-cell-checkbox">
|
||||||
data-key="1-0-0"
|
|
||||||
data-unresize="true"
|
|
||||||
class="layui-table-col-special"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="
|
|
||||||
layui-table-cell
|
|
||||||
laytable-cell-1-0-0 laytable-cell-checkbox
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="layTableCheckbox"
|
name="layTableCheckbox"
|
||||||
lay-skin="primary"
|
lay-skin="primary"
|
||||||
lay-filter="layTableAllChoose"
|
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="layui-unselect layui-form-checkbox"
|
class="layui-unselect layui-form-checkbox"
|
||||||
@ -50,112 +37,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th v-for="column in columns" :key="column">
|
||||||
data-field="id"
|
<div
|
||||||
data-key="1-0-1"
|
class="layui-table-cell"
|
||||||
data-unresize="true"
|
:style="{ width: column.width }"
|
||||||
class="layui-unselect"
|
>
|
||||||
>
|
<span>{{ column.title }}</span>
|
||||||
<div class="layui-table-cell laytable-cell-1-0-1">
|
|
||||||
<span>ID</span
|
|
||||||
><span class="layui-table-sort layui-inline"
|
|
||||||
><i
|
|
||||||
class="layui-edge layui-table-sort-asc"
|
|
||||||
title="升序"
|
|
||||||
></i
|
|
||||||
><i
|
|
||||||
class="layui-edge layui-table-sort-desc"
|
|
||||||
title="降序"
|
|
||||||
></i
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th data-field="username" data-key="1-0-2" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-2">
|
|
||||||
<span>用户名</span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th data-field="email" data-key="1-0-3" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-3">
|
|
||||||
<span>邮箱</span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
data-field="experience"
|
|
||||||
data-key="1-0-4"
|
|
||||||
class="layui-unselect"
|
|
||||||
>
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-4">
|
|
||||||
<span>积分</span
|
|
||||||
><span class="layui-table-sort layui-inline"
|
|
||||||
><i
|
|
||||||
class="layui-edge layui-table-sort-asc"
|
|
||||||
title="升序"
|
|
||||||
></i
|
|
||||||
><i
|
|
||||||
class="layui-edge layui-table-sort-desc"
|
|
||||||
title="降序"
|
|
||||||
></i
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th data-field="sex" data-key="1-0-5" class="layui-unselect">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-5">
|
|
||||||
<span>性别</span
|
|
||||||
><span class="layui-table-sort layui-inline"
|
|
||||||
><i
|
|
||||||
class="layui-edge layui-table-sort-asc"
|
|
||||||
title="升序"
|
|
||||||
></i
|
|
||||||
><i
|
|
||||||
class="layui-edge layui-table-sort-desc"
|
|
||||||
title="降序"
|
|
||||||
></i
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th data-field="logins" data-key="1-0-6" class="layui-unselect">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-6">
|
|
||||||
<span>登入次数</span
|
|
||||||
><span class="layui-table-sort layui-inline"
|
|
||||||
><i
|
|
||||||
class="layui-edge layui-table-sort-asc"
|
|
||||||
title="升序"
|
|
||||||
></i
|
|
||||||
><i
|
|
||||||
class="layui-edge layui-table-sort-desc"
|
|
||||||
title="降序"
|
|
||||||
></i
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th data-field="sign" data-key="1-0-7" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-7">
|
|
||||||
<span>签名</span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th data-field="city" data-key="1-0-8" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-8">
|
|
||||||
<span>城市</span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th data-field="ip" data-key="1-0-9" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-9">
|
|
||||||
<span>IP</span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th data-field="joinTime" data-key="1-0-10" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-10">
|
|
||||||
<span>加入时间</span>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
data-field="11"
|
|
||||||
data-key="1-0-11"
|
|
||||||
class="layui-table-col-special"
|
|
||||||
>
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-11">
|
|
||||||
<span>操作</span>
|
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
@ -165,119 +52,61 @@
|
|||||||
<div class="layui-table-body layui-table-main">
|
<div class="layui-table-body layui-table-main">
|
||||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr data-index="0" class="">
|
<template v-for="data in dataSource" :key="data">
|
||||||
<td
|
<tr>
|
||||||
data-field="0"
|
<td class="layui-table-col-special">
|
||||||
data-key="1-0-0"
|
<div class="layui-table-cell laytable-cell-checkbox">
|
||||||
class="layui-table-col-special"
|
<input
|
||||||
>
|
type="checkbox"
|
||||||
<div
|
name="layTableCheckbox"
|
||||||
class="
|
lay-skin="primary"
|
||||||
layui-table-cell
|
/>
|
||||||
laytable-cell-1-0-0 laytable-cell-checkbox
|
<div
|
||||||
"
|
class="layui-unselect layui-form-checkbox"
|
||||||
>
|
lay-skin="primary"
|
||||||
<input
|
>
|
||||||
type="checkbox"
|
<i class="layui-icon layui-icon-ok"></i>
|
||||||
name="layTableCheckbox"
|
</div>
|
||||||
lay-skin="primary"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="layui-unselect layui-form-checkbox"
|
|
||||||
lay-skin="primary"
|
|
||||||
>
|
|
||||||
<i class="layui-icon layui-icon-ok"></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
</td>
|
|
||||||
<td data-field="id" data-key="1-0-1" class="">
|
<template v-for="(value, key, index) in data" :key="index">
|
||||||
<div class="layui-table-cell laytable-cell-1-0-1">10001</div>
|
<template v-for="column in columns" :key="column">
|
||||||
</td>
|
<td v-if="column.key == key">
|
||||||
<td
|
<div
|
||||||
data-field="username"
|
:style="{ width: column.width }"
|
||||||
data-key="1-0-2"
|
style="padding: 0px 16px"
|
||||||
data-edit="text"
|
>
|
||||||
class=""
|
<span v-if="column.slot">
|
||||||
>
|
<slot :name="column.slot" :data="data"></slot>
|
||||||
<div class="layui-table-cell laytable-cell-1-0-2">杜甫</div>
|
</span>
|
||||||
</td>
|
<span v-else> {{ value }} </span>
|
||||||
<td
|
</div>
|
||||||
data-field="email"
|
</td>
|
||||||
data-key="1-0-3"
|
</template>
|
||||||
data-edit="text"
|
</template>
|
||||||
data-content="test@email.com"
|
</tr>
|
||||||
class=""
|
</template>
|
||||||
>
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-3">
|
|
||||||
<em>test@email.com</em>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td data-field="experience" data-key="1-0-4" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-4">116</div>
|
|
||||||
</td>
|
|
||||||
<td data-field="sex" data-key="1-0-5" data-edit="text" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-5">男</div>
|
|
||||||
</td>
|
|
||||||
<td data-field="logins" data-key="1-0-6" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-6">108</div>
|
|
||||||
</td>
|
|
||||||
<td data-field="sign" data-key="1-0-7" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-7">
|
|
||||||
点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td data-field="city" data-key="1-0-8" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-8">
|
|
||||||
浙江杭州
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td data-field="ip" data-key="1-0-9" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-9">
|
|
||||||
192.168.0.8
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td data-field="joinTime" data-key="1-0-10" class="">
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-10">
|
|
||||||
2016-10-14
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
data-field="11"
|
|
||||||
data-key="1-0-11"
|
|
||||||
data-off="true"
|
|
||||||
class="layui-table-col-special"
|
|
||||||
>
|
|
||||||
<div class="layui-table-cell laytable-cell-1-0-11">
|
|
||||||
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|
||||||
<a
|
|
||||||
class="layui-btn layui-btn-danger layui-btn-xs"
|
|
||||||
lay-event="del"
|
|
||||||
>删除</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="layui-table-page">
|
||||||
<div class="layui-table-page">
|
<lay-page total="100" limit="10" showPage showLimit showSkip></lay-page>
|
||||||
<div id="layui-table-page1">
|
|
||||||
<lay-page total="100" limit="10" showPage showLimit showSkip></lay-page>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup name="LayTable" lang="ts">
|
<script setup name="LayTable" lang="ts">
|
||||||
import { defineProps, defineEmits } from 'vue'
|
import { defineProps, useSlots } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props =
|
||||||
defineProps<{
|
defineProps<{
|
||||||
columns?: Object[]
|
columns?: Object[]
|
||||||
data?: Object[]
|
dataSource?: Object[]
|
||||||
|
skin?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
const slot = useSlots()
|
||||||
|
const slots = slot.default && slot.default()
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user