139 lines
2.7 KiB
Vue
139 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<el-container>
|
||
|
|
<el-aside width="30%">
|
||
|
|
<h3>列表</h3>
|
||
|
|
<ul>
|
||
|
|
<li v-for="(item,index) in list" :key="index" :class="activeIndex==index?'active':'hh'" @click="handleClick(item.id,index)">
|
||
|
|
{{ item.title }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</el-aside>
|
||
|
|
<el-main>
|
||
|
|
<el-form ref="form" :model="form" label-width="80px">
|
||
|
|
<el-form-item label="篇名">
|
||
|
|
<el-input v-model="form.name" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="篇名分词">
|
||
|
|
<el-input v-model="form.keyWord" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<div>
|
||
|
|
<h3>文献表格</h3>
|
||
|
|
<el-table
|
||
|
|
:data="tableData"
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
prop="date"
|
||
|
|
label="日期"
|
||
|
|
width="180"
|
||
|
|
/>
|
||
|
|
<el-table-column
|
||
|
|
prop="name"
|
||
|
|
label="姓名"
|
||
|
|
width="180"
|
||
|
|
/>
|
||
|
|
<el-table-column
|
||
|
|
prop="address"
|
||
|
|
label="地址"
|
||
|
|
/>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3>段落内容</h3>
|
||
|
|
<p>
|
||
|
|
哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Sections',
|
||
|
|
// props: {
|
||
|
|
// msg: String
|
||
|
|
// },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
title: '标题一',
|
||
|
|
id: '1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '标题二',
|
||
|
|
id: '2'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
activeIndex: 0,
|
||
|
|
form: {
|
||
|
|
name: '',
|
||
|
|
keyWord: ''
|
||
|
|
},
|
||
|
|
tableData: [{
|
||
|
|
date: '2016-05-02',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-04',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-01',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
||
|
|
}, {
|
||
|
|
date: '2016-05-03',
|
||
|
|
name: '王小虎',
|
||
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
created() {
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
mounted() {},
|
||
|
|
init() {
|
||
|
|
|
||
|
|
},
|
||
|
|
handleClick(id, index) {
|
||
|
|
this.activeIndex = index
|
||
|
|
console.log('id', id)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.el-main{
|
||
|
|
padding:0;
|
||
|
|
padding:2% 1% 0 5%;
|
||
|
|
}
|
||
|
|
.el-aside{
|
||
|
|
padding:0 4%;
|
||
|
|
}
|
||
|
|
.el-aside ul li{
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.el-aside ul li:hover{
|
||
|
|
color:blue;
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
color:blue;
|
||
|
|
}
|
||
|
|
h3{
|
||
|
|
margin-top:30px;
|
||
|
|
padding-bottom:10px;
|
||
|
|
}
|
||
|
|
.el-form label,h3{
|
||
|
|
text-align: left;
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: rgb(68, 68, 68);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|