v-slot
其简写形式为 #
父组件在引入指定插槽时候,template指定插槽时必须使用 v-slot ,
类似于 v-on 的简写 @
和 v-bind的简写是冒号 :
v-slot 其简写形式为井号 #,比如:
<template>
<div>
<Header>
<h1 slot="a">插槽a</h1>
<template #c>
<h1>插槽c 内容1</h1>
<h1>插槽c 内容2</h1>
</template>
</Header>
</div>
</template>
注意: v-slot 属性只支持 <template>标签
使用示例
表格里第一列内容不是普通文本,增加单选按钮,使用插槽方式
<template>
<a-table
:row-selection="rowSelection"
:columns="columns"
:data-source="data"
:custom-row="customRow"
>
<template #name="{ text }">
<a>{{ text }}</a>
</template>
</a-table>
</template>
<script>
import {computed, defineComponent, reactive} from "vue";
const columns = [
{
title: "Name",
dataIndex: "name",
slots: {customRender: "name"},
},
{
title: "Age",
dataIndex: "age",
},
{
title: "Address",
dataIndex: "address",
},
];
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
},
{
key: "4",
name: "Disabled User",
age: 99,
address: "Sidney No. 1 Lake Park",
},
];
export default defineComponent({
name: "App",
setup() {
const state = reactive({
selectedRowKeys: [],
});
const selectRow = (record) => {
const selectedRowKeys = [...state.selectedRowKeys];
if (selectedRowKeys.indexOf(record.key) >= 0) {
selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
} else {
selectedRowKeys.push(record.key);
}
state.selectedRowKeys = selectedRowKeys;
};
const rowSelection = computed(() => {
return {
selectedRowKeys: state.selectedRowKeys,
onChange: (selectedRowKeys) => {
state.selectedRowKeys = selectedRowKeys;
},
};
});
const customRow = (record) => {
return {
onClick: () => {
selectRow(record);
},
};
};
return {
data,
columns,
customRow,
rowSelection,
};
},
});
</script>
<style scoped>
</style>
效果: