4 changed files with 60 additions and 109 deletions
-
109src/components/blogs/ceshi.vue
-
13src/router/admin.ts
-
12src/views/admin/BlogManageView.vue
-
35src/views/blog/blogcontent/BlogListView.vue
@ -1,95 +1,30 @@ |
|||||
<template> |
<template> |
||||
<a-table :columns="columns" :data-source="data"> |
|
||||
<template #headerCell="{ column }"> |
|
||||
<template v-if="column.key === 'name'"> |
|
||||
<span> |
|
||||
<!-- <smile-outlined /> --> |
|
||||
Name |
|
||||
</span> |
|
||||
</template> |
|
||||
</template> |
|
||||
|
|
||||
<template #bodyCell="{ column, record }"> |
|
||||
<template v-if="column.key === 'name'"> |
|
||||
{{ record.name }} |
|
||||
</template> |
|
||||
<template v-else-if="column.key === 'tags'"> |
|
||||
<span> |
|
||||
<a-tag |
|
||||
v-for="tag in record.tags" |
|
||||
:key="tag" |
|
||||
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'" |
|
||||
> |
|
||||
{{ tag.toUpperCase() }} |
|
||||
</a-tag> |
|
||||
</span> |
|
||||
</template> |
|
||||
<template v-else-if="column.key === 'action'"> |
|
||||
<span> |
|
||||
<a>Invite 一 {{ record.name }}</a> |
|
||||
<a-divider type="vertical" /> |
|
||||
<a>Delete</a> |
|
||||
<a-divider type="vertical" /> |
|
||||
<a class="ant-dropdown-link"> |
|
||||
More actions |
|
||||
<down-outlined /> |
|
||||
</a> |
|
||||
</span> |
|
||||
</template> |
|
||||
</template> |
|
||||
</a-table> |
|
||||
|
<a-form-item name="select-multiple" label="Select[multiple]"> |
||||
|
<a-select v-model:value="formState.labels" mode="multiple" placeholder="Please select favourite colors"> |
||||
|
<a-select-option :value="type.id" v-for="type in typelist" > |
||||
|
{{ type.color }} |
||||
|
</a-select-option> |
||||
|
</a-select> |
||||
|
</a-form-item> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
|
||||
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'; |
|
||||
const columns = [ |
|
||||
{ |
|
||||
name: 'Name', |
|
||||
dataIndex: 'name', |
|
||||
key: 'name', |
|
||||
}, |
|
||||
{ |
|
||||
title: 'Age', |
|
||||
dataIndex: 'age', |
|
||||
key: 'age', |
|
||||
}, |
|
||||
{ |
|
||||
title: 'Address', |
|
||||
dataIndex: 'address', |
|
||||
key: 'address', |
|
||||
}, |
|
||||
{ |
|
||||
title: 'Tags', |
|
||||
key: 'tags', |
|
||||
dataIndex: 'tags', |
|
||||
}, |
|
||||
{ |
|
||||
title: 'Action', |
|
||||
key: 'action', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const data = [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
name: 'John Brown', |
|
||||
age: 32, |
|
||||
address: 'New York No. 1 Lake Park', |
|
||||
tags: ['nice', 'developer'], |
|
||||
}, |
|
||||
|
<script setup lang='ts'> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
const formState = ref({ |
||||
|
labels: [2, 3] // 初始值设定为 typelist 中的 id 值 |
||||
|
}); |
||||
|
|
||||
|
const typelist = ref([ |
||||
{ |
{ |
||||
key: '2', |
|
||||
name: 'Jim Green', |
|
||||
age: 42, |
|
||||
address: 'London No. 1 Lake Park', |
|
||||
tags: ['loser'], |
|
||||
|
id: 2, |
||||
|
color: 'red' |
||||
}, |
}, |
||||
{ |
{ |
||||
key: '3', |
|
||||
name: 'Joe Black', |
|
||||
age: 32, |
|
||||
address: 'Sidney No. 1 Lake Park', |
|
||||
tags: ['cool', 'teacher'], |
|
||||
}, |
|
||||
]; |
|
||||
|
id: 3, |
||||
|
color: 'green' |
||||
|
} |
||||
|
]); |
||||
</script> |
</script> |
||||
|
|
||||
|
<style></style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue