feat(table): columns 配置 新增 customSlot 自定义插槽
This commit is contained in:
parent
402fb53d8b
commit
1675a4f06a
@ -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"
|
||||
}
|
||||
]
|
||||
|
||||
|
@ -3635,7 +3635,6 @@ a cite {
|
||||
|
||||
.layui-table-view .layui-table {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
border-collapse: separate
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user