master
parent
48ffeec77a
commit
27f1aea353
|
After Width: | Height: | Size: 5.2 MiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 40 KiB |
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div style="margin-bottom: 16px">
|
||||
<a-button type="primary" :disabled="!hasSelected" :loading="loading">
|
||||
批量
|
||||
</a-button>
|
||||
<span style="margin-left: 8px">
|
||||
<template v-if="hasSelected">
|
||||
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
:row-key="
|
||||
(record, index) => {
|
||||
return index;
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- <a slot="del" slot-scope="scope" @click="del(scope)">删除</a>
|
||||
<span slot="formatter" slot-scope="scope" >{{scope}}</span> -->
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
},
|
||||
loading: false,
|
||||
selectedRowKeys: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasSelected() {
|
||||
return this.selectedRowKeys.length > 0;
|
||||
},
|
||||
},
|
||||
props: {
|
||||
columns: Array,
|
||||
tableData: Array,
|
||||
},
|
||||
methods: {
|
||||
onSelectChange(selectedRowKeys) {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#commonTable {
|
||||
margin: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,24 @@
|
||||
@import "./antd.less";
|
||||
// 公共样式
|
||||
#app{
|
||||
background: #E5E5E5;
|
||||
}
|
||||
.content{
|
||||
padding: 13px;
|
||||
}
|
||||
.main{
|
||||
padding: 13px;
|
||||
background: #fff;
|
||||
}
|
||||
.cardTitle{
|
||||
border-left: 8px solid #205FBD;
|
||||
padding-left:10px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#app{
|
||||
background: #E5E5E5;
|
||||
#commonTable{
|
||||
margin: 24px;
|
||||
}
|
||||
.search-box {
|
||||
margin: 30px;
|
||||
}
|
||||
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 标题 -->
|
||||
<div class="cardTitle">申请入驻管理</div>
|
||||
<!-- 搜索 -->
|
||||
<div class="search-box">
|
||||
<a-space size="large">
|
||||
<a-input placeholder="请输入申请人/公司名" />
|
||||
<a-select style="width: 200px" placeholder="选择状态" />
|
||||
<a-button type="primary">查 询</a-button>
|
||||
<a-button>重 置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div id="commonTable">
|
||||
<div style="margin-bottom: 16px">
|
||||
<a-button type="primary" :disabled="!hasSelected" :loading="loading">
|
||||
批量操作
|
||||
</a-button>
|
||||
<span style="margin-left: 8px">
|
||||
<template v-if="hasSelected">
|
||||
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<a-table
|
||||
:scroll="{ x: 1300 }"
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
@change="handleTableChange"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
:row-key="
|
||||
(record, index) => {
|
||||
return index;
|
||||
}
|
||||
"
|
||||
>
|
||||
操作
|
||||
<span slot="action" slot-scope="scope">
|
||||
<a @click="del(scope)">删除</a>
|
||||
<span style="margin: 2px">|</span>
|
||||
<a @click="detail(scope)">详情</a>
|
||||
</span>
|
||||
<span slot="formatter" slot-scope="scope">{{
|
||||
scope === 1 ? "可" : ""
|
||||
}}</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 搜索项
|
||||
searchForm: {
|
||||
name: "",
|
||||
code: "",
|
||||
},
|
||||
// 列
|
||||
columns: [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "Gender",
|
||||
dataIndex: "gender",
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "Gender1",
|
||||
dataIndex: "gender1",
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "Gender2",
|
||||
dataIndex: "gender2",
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "Gender3",
|
||||
dataIndex: "gender3",
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "Gender4",
|
||||
dataIndex: "gender4",
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "Gender5",
|
||||
dataIndex: "gender5",
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "Gender6",
|
||||
dataIndex: "gender6",
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "status",
|
||||
dataIndex: "status",
|
||||
scopedSlots: { customRender: "formatter" },
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
key: "action",
|
||||
width: "200",
|
||||
fixed: "right",
|
||||
scopedSlots: { customRender: "action" },
|
||||
},
|
||||
],
|
||||
// 数据
|
||||
tableData: [
|
||||
{
|
||||
name: "11",
|
||||
id: 1,
|
||||
status: 1,
|
||||
},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
],
|
||||
// 分页
|
||||
pagination: {
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
},
|
||||
loading: false,
|
||||
selectedRowKeys: [],
|
||||
};
|
||||
},
|
||||
mounted(){},
|
||||
computed: {
|
||||
hasSelected() {
|
||||
return this.selectedRowKeys.length > 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSelectChange(selectedRowKeys) {
|
||||
console.log("selectedRowKeys changed: ", selectedRowKeys);
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
},
|
||||
handleTableChange(pagination) {
|
||||
console.log(pagination);
|
||||
const pager = { ...this.pagination };
|
||||
pager.current = pagination.current;
|
||||
this.pagination = pager;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>>
|
||||
Loading…
Reference in new issue