📝(table): 更新数据案例

This commit is contained in:
就眠儀式 2022-07-12 09:31:40 +08:00
parent dd711a00b4
commit a068704835

View File

@ -659,7 +659,7 @@ export default {
::: title 固定行列 ::: title 固定行列
::: :::
::: demo 通过 `skin` 属性, 切换 table 风格 ::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left``right`
<template> <template>
<lay-table :columns="columns20" :dataSource="dataSource20"></lay-table> <lay-table :columns="columns20" :dataSource="dataSource20"></lay-table>
@ -717,6 +717,70 @@ export default {
::: :::
::: title 刷新数据
:::
::: demo 通过 `data-source` 的赋值,实现数据的更新
<template>
<lay-button @click="changeDataSource21">更新数据</lay-button>
<lay-table :columns="columns21" :dataSource="dataSource21"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns21 = [
{
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 dataSource21 = 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) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue谐音类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue谐音类 UI) '}
])
const changeDataSource21 = () => {
dataSource21.value = [{username:"update", password:"update",sex:"boy", age:"18", remark: '更新数据 '}]
}
return {
columns21,
dataSource21,
changeDataSource21
}
}
}
</script>
:::
::: title Table 属性 ::: title Table 属性
::: :::