2021-10-09 10:41:52 +08:00
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
2021-10-10 05:48:45 +08:00
|
|
|
<lay-table :columns="columns" :dataSource="dataSource">
|
|
|
|
<template v-slot:username="{ data }"> {{data.username}} </template>
|
|
|
|
<template v-slot:password="{ data }"> {{data.password}} </template>
|
2021-10-10 15:22:07 +08:00
|
|
|
<template v-slot:operator="{ data }">
|
2021-10-11 00:44:00 +08:00
|
|
|
<lay-button >修改</lay-button>
|
2021-10-10 15:22:07 +08:00
|
|
|
<lay-button type="primary">删除</lay-button>
|
|
|
|
</template>
|
2021-10-10 05:48:45 +08:00
|
|
|
</lay-table>
|
2021-10-09 10:41:52 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
2021-10-10 05:48:45 +08:00
|
|
|
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title:"账户",
|
|
|
|
width:"200px",
|
|
|
|
slot:"username",
|
|
|
|
key:"username"
|
|
|
|
},{
|
|
|
|
title:"密码",
|
|
|
|
width: "180px",
|
|
|
|
slot:"password",
|
|
|
|
key:"password"
|
|
|
|
},{
|
|
|
|
title:"年龄",
|
|
|
|
width: "180px",
|
|
|
|
key:"age"
|
|
|
|
},{
|
2021-10-10 15:22:07 +08:00
|
|
|
title:"操作",
|
2021-10-10 05:48:45 +08:00
|
|
|
width: "180px",
|
2021-10-10 15:22:07 +08:00
|
|
|
customSlot:"operator",
|
|
|
|
key:"operator"
|
2021-10-10 05:48:45 +08:00
|
|
|
}
|
|
|
|
]
|
|
|
|
|
|
|
|
const dataSource = [
|
|
|
|
{username:"root", password:"root", age:"18"},
|
|
|
|
{username:"woow", password:"woow", age:"20"}
|
|
|
|
]
|
|
|
|
|
2021-10-09 10:41:52 +08:00
|
|
|
return {
|
2021-10-10 05:48:45 +08:00
|
|
|
columns,
|
|
|
|
dataSource
|
2021-10-09 10:41:52 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2021-10-11 00:44:00 +08:00
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-table :columns="columns" :dataSource="dataSource" :page="page" @change="change">
|
|
|
|
<template v-slot:username="{ data }"> {{data.username}} </template>
|
|
|
|
<template v-slot:password="{ data }"> {{data.password}} </template>
|
|
|
|
<template v-slot:operator="{ data }">
|
|
|
|
<lay-button >修改</lay-button>
|
|
|
|
<lay-button type="primary">删除</lay-button>
|
|
|
|
</template>
|
|
|
|
</lay-table>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const page = {
|
|
|
|
total: 100,
|
|
|
|
limit: 10
|
|
|
|
}
|
|
|
|
|
|
|
|
const change = function({ current }){
|
|
|
|
console.log("当前页:" + JSON.stringify(current))
|
|
|
|
}
|
|
|
|
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title:"账户",
|
|
|
|
width:"200px",
|
|
|
|
slot:"username",
|
|
|
|
key:"username"
|
|
|
|
},{
|
|
|
|
title:"密码",
|
|
|
|
width: "180px",
|
|
|
|
slot:"password",
|
|
|
|
key:"password"
|
|
|
|
},{
|
|
|
|
title:"年龄",
|
|
|
|
width: "180px",
|
|
|
|
key:"age"
|
|
|
|
},{
|
|
|
|
title:"操作",
|
|
|
|
width: "180px",
|
|
|
|
customSlot:"operator",
|
|
|
|
key:"operator"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
|
|
|
const dataSource = [
|
|
|
|
{username:"root", password:"root", age:"18"},
|
|
|
|
{username:"woow", password:"woow", age:"20"}
|
|
|
|
]
|
|
|
|
|
|
|
|
return {
|
|
|
|
page,
|
|
|
|
change,
|
|
|
|
columns,
|
|
|
|
dataSource
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2021-10-09 10:41:52 +08:00
|
|
|
:::
|