feat(table): columns 配置 新增 customSlot 自定义插槽

This commit is contained in:
就眠仪式 2021-10-10 15:22:07 +08:00
parent 402fb53d8b
commit 1675a4f06a
3 changed files with 26 additions and 49 deletions

View File

@ -4,6 +4,10 @@
<lay-table :columns="columns" :dataSource="dataSource">
<template v-slot:username="{ data }"> {{data.username}} </template>
<template v-slot:password="{ data }"> {{data.password}} </template>
<template v-slot:operator="{ data }">
<lay-button type="primary">修改</lay-button>
<lay-button type="primary">删除</lay-button>
</template>
</lay-table>
</template>
@ -28,54 +32,11 @@ export default {
title:"年龄",
width: "180px",
key:"age"
}
]
const dataSource = [
{username:"root", password:"root", age:"18"},
{username:"woow", password:"woow", age:"20"}
]
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:"密码",
title:"操作",
width: "180px",
slot:"password",
key:"password"
},{
title:"年龄",
width: "180px",
key:"age"
customSlot:"operator",
key:"operator"
}
]

View File

@ -3635,7 +3635,6 @@ a cite {
.layui-table-view .layui-table {
position: relative;
width: auto;
margin: 0;
border-collapse: separate
}

View File

@ -70,8 +70,24 @@
</div>
</td>
<template v-for="(value, key, index) in data" :key="index">
<template v-for="column in columns" :key="column">
<template v-for="column in columns" :key="column">
<template v-if="column.customSlot">
<td>
<div
:style="{ width: column.width }"
style="padding: 0px 16px"
>
<slot :name="column.customSlot" :data="data"></slot>
</div>
</td>
</template>
<template
v-else
v-for="(value, key, index) in data"
:key="index"
>
<td v-if="column.key == key">
<div
:style="{ width: column.width }"
@ -84,6 +100,7 @@
</div>
</td>
</template>
</template>
</tr>
</template>