15 KiB
15 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 展示行列数据。 :::
::: title 基础使用 :::
::: demo 使用 lay-table 标签, 创建表格
:::
::: title 不同尺寸 :::
::: demo
sm md lg <script> import { ref } from 'vue' export default { setup() { const columns2 = [ { title:"账户", width:"200px", key:"username" },{ title:"密码", width: "180px", key:"password" },{ title:"年龄", width: "180px", key:"age" } ] const dataSource2 = [ {username:"root", password:"root", age:"18"}, {username:"woow", password:"woow", age:"20"} ] const size2 = ref('md'); return { size2, columns2, dataSource2 } } } </script>:::
::: title 开启分页 :::
::: demo
<script> import { ref } from 'vue' export default { setup() { const page3 = { total: 100, limit: 10, current: 2 } const change3 = function({ current }){ console.log("当前页:" + JSON.stringify(current)) } const columns3 = [ { title:"账户", width:"200px", slot:"username", key:"username" },{ title:"密码", width: "180px", slot:"password", key:"password" },{ title:"年龄", width: "180px", key:"age" } ] const dataSource3 = [ {username:"root", password:"root", age:"18"}, {username:"woow", password:"woow", age:"20"} ] return { page3, change3, columns3, dataSource3 } } } </script>:::
::: title 开启排序 :::
::: demo
<script> import { ref } from 'vue' export default { setup() { const columns4 = [ { title:"姓名", width:"200px", key:"name" },{ title:"成绩", width: "180px", key:"score", sort: true } ] const dataSource4 = [ {name:"张三", score:100}, {name:"李四", score:80}, {name:"王二", score:99}, {name:"麻子", score:92}, {name:"无名", score:60}, {name:"有名", score:70}, ] return { columns4, dataSource4 } } } </script>:::
::: title 完整表格 :::
::: demo
新增 删除 {{data.username}} 😊 {{data.password}} 修改 删除
内容
<script>
import { ref, watch } from 'vue'
export default {
setup() {
const selectedKeys5 = ref(['1'])
const checkbox5 = ref(true)
const defaultToolbar5 = ref(true)
const columns5 = [
{
title:"账户",
width:"200px",
titleSlot: "username-title",
customSlot:"username",
key:"username",
align: "left"
},{
title:"密码",
customSlot:"password",
width:"200px",
key:"password",
align: "center"
},
{
title:"年龄",
width: "200px",
key:"age",
sort: true,
align: "right"
},
{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true,
}
,{
title:"操作",
width:"100px",
customSlot:"operator",
key:"operator"
}
]
const dataSource5 = [
{id:"1", username:"root",password: '**',age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"2", username:"woow",password: '**', age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
]
const rowClick5 = function(data) {
console.log(JSON.stringify(data))
}
const rowDoubleClick5 = function(data) {
console.log(JSON.stringify(data))
}
watch(selectedKeys5, () => {
console.log("复选框监听:" + selectedKeys5.value);
})
return {
columns5,
dataSource5,
selectedKeys5,
checkbox5,
defaultToolbar5,
rowClick5,
rowDoubleClick5
}
}
}
</script>
:::
::: title 开启子表 :::
::: demo 当表格内容较多不能一次性完全展示时。
{{ data }} <script> import { ref } from 'vue' export default { setup() { const columns6 = [ { title:"姓名", width:"200px", key:"name" },{ title:"成绩", width: "180px", key:"score" } ] const dataSource6 = [ {name:"张三", score:100}, {name:"李四", score:80}, {name:"王二", score:99}, {name:"麻子", score:92}, {name:"无名", score:60}, {name:"有名", score:70}, ] return { columns6, dataSource6 } } } </script>:::
::: title 树形表格 :::
::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段
<script> import { ref } from 'vue' export default { setup() { const columns7 = [ { title:"姓名", width:"200px", key:"name" },{ title:"成绩", width: "180px", key:"score" }, ] const dataSource7 = [ {name:"系统管理", score:100, children: [{name:"用户管理", score:100, children: [{name:"用户修改", score:100},{name:"用户删除", score:100}]},{name:"角色管理", score:100}]}, {name:"电商管理", score:100, children: [{name:"商品管理", score:100},{name:"分类管理", score:100}]}, ] return { columns7, dataSource7 } } } </script>:::
::: title 固定表头 :::
::: demo 设置 height 或者 max-height 即可实现
:::
::: title 斑马条纹 :::
::: demo 通过 even 属性, 开启斑马条纹, 默认为 false。
:::
::: title Table 属性 :::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| columns | 列配置 - 更多 | -- | -- | -- |
| dataSource | 数据源 | -- | -- | -- |
| checkbox | 开启复选框 | boolean |
false |
true false |
| id | 主键 | string |
-- | -- |
| v-model:selectedKeys | 选中项 | -- | -- | -- |
| default-toolbar | 工具栏 | boolean |
false |
true false |
| size | 尺寸 | string |
md |
lg md sm |
| children-column-name | 树节点字段 | string |
children |
-- |
| indent-size | 树表行级缩进 | number |
30 |
-- |
| height | 表格高度 | number |
-- | -- |
| maxHeight | 表格最大高度 | number |
-- | -- |
:::
::: title Table 事件 :::
::: table
| 属性 | 描述 | 参数 |
|---|---|---|
| row | 行单击 | data : 当前行 |
| row-double | 行双击 | data : 当前行 |
:::
::: title Table 插槽 :::
::: table
| 插槽 | 描述 | 参数 |
|---|---|---|
| toolbar | 自定义工具栏 | -- |
:::
::: title Table 数据 :::
::: table
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| title | 列标题 | -- | -- | -- |
| key | 数据字段 | -- | -- | -- |
| customSlot | 自定义插槽 | -- | -- | -- |
| width | 宽度 | -- | -- | -- |
| minWidth | 最小宽度 | -- | 100px |
-- |
| sort | 排序 | -- | -- | -- |
| titleSlot | 标题插槽 | -- | -- | -- |
| align | 对齐方式 | string |
left |
left right center |
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | boolean |
false |
true false |
:::
::: contributor table :::
::: previousNext table :::