theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

♻️(table): 重构 checkbox 实现方式

Browse Source
This commit is contained in:
就眠儀式
2022-07-18 15:25:43 +08:00
parent f37d9c3f0c
commit 3b7e0ff326
3 changed files with 243 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
package/document-component/src/document/zh-CN/components/table.md
View File

@@ -613,13 +613,12 @@ export default {
:::
::: title 刷新数据
::: title 开启序号
:::
::: demo 通过 `data-source` 的赋值，实现数据的更新
::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` 与 `right`。
<template>
<lay-button @click="changeDataSource21">更新数据</lay-button>
<lay-table :columns="columns21" :dataSource="dataSource21"></lay-table>
</template>
@@ -630,6 +629,12 @@ export default {
setup() {
const columns21 = [
{
title: "ID",
width: "30px",
type: "number",
align: "center"
},
{
title:"账户",
width:"200px",
@@ -654,7 +659,135 @@ export default {
}
]
const dataSource21 = ref([
const dataSource21 = [
{username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
return {
columns21,
dataSource21,
}
}
}
</script>
:::
::: title 开启多选
:::
::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` 与 `right`。
<template>
<lay-table :columns="columns23" :dataSource="dataSource23"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns23 = [
{
title: "ID",
width: "30px",
type: "checkbox",
align: "center"
},
{
title:"标识",
width:"30px",
key:"id"
},
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
width: "300px",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const dataSource23 = [
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
return {
columns23,
dataSource23,
}
}
}
</script>
:::
::: title 刷新数据
:::
::: demo 通过 `data-source` 的赋值，实现数据的更新
<template>
<lay-button @click="changeDataSource22">更新数据</lay-button>
<lay-table :columns="columns22" :dataSource="dataSource22"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns22 = [
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
width: "300px",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const dataSource22 = ref([
{username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
@@ -662,14 +795,14 @@ export default {
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
])
const changeDataSource21 = () => {
const changeDataSource22 = () => {
dataSource21.value = [{username:"update", password:"update",sex:"boy", age:"18", remark: '更新数据 '}]
}
return {
columns21,
dataSource21,
changeDataSource21
columns22,
dataSource22,
changeDataSource22
}
}
}