165 lines
4.4 KiB
Vue
165 lines
4.4 KiB
Vue
<template>
|
||
<div>
|
||
<el-card class="box-card">
|
||
<div class="goods"
|
||
style="margin:20px">
|
||
<el-form ref="form"
|
||
:inline="true"
|
||
:model="form">
|
||
<el-form-item label="查询类别：">
|
||
<el-select v-model="form.name1"
|
||
placeholder="全部">
|
||
<el-option v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="操作用户">
|
||
<el-select v-model="form.name2"
|
||
placeholder="输入操作用户">
|
||
<el-option v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="操作时间：">
|
||
<el-date-picker v-model="value1"
|
||
type="datetimerange"
|
||
range-separator="至"
|
||
start-placeholder="起"
|
||
end-placeholder="止"
|
||
align="right">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary">查询</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
</div>
|
||
|
||
</el-card>
|
||
<el-card style="margin-top:30px"
|
||
class="box-card">
|
||
<div>
|
||
<span></span>
|
||
<span>历史记录</span>
|
||
<span>（共800条）</span>
|
||
<span>——玫瑰花</span>
|
||
</div>
|
||
<el-table :data="tableData"
|
||
style="width: 100%">
|
||
<el-table-column prop="date"
|
||
label="序号"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="name"
|
||
label="时间"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="address"
|
||
label="类别">
|
||
</el-table-column>
|
||
<el-table-column prop="address"
|
||
label="操作前">
|
||
</el-table-column>
|
||
<el-table-column prop="address"
|
||
label="操作后">
|
||
</el-table-column>
|
||
<el-table-column prop="address"
|
||
label="操作人">
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
</el-card>
|
||
<el-pagination @size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage4"
|
||
:page-sizes="[100, 200, 300, 400]"
|
||
:page-size="100"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="400">
|
||
</el-pagination>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
options: [
|
||
{
|
||
value: '选项1',
|
||
label: '黄金糕',
|
||
},
|
||
{
|
||
value: '选项2',
|
||
label: '双皮奶',
|
||
},
|
||
{
|
||
value: '选项3',
|
||
label: '蚵仔煎',
|
||
},
|
||
{
|
||
value: '选项4',
|
||
label: '龙须面',
|
||
},
|
||
{
|
||
value: '选项5',
|
||
label: '北京烤鸭',
|
||
},
|
||
],
|
||
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 弄',
|
||
},
|
||
],
|
||
currentPage4: 4,
|
||
form: {
|
||
name1: '',
|
||
name2: '',
|
||
name3: '',
|
||
name4: '',
|
||
name5: '',
|
||
name6: '',
|
||
},
|
||
input: '',
|
||
value1: '',
|
||
}
|
||
},
|
||
methods: {
|
||
handleSizeChange(val) {
|
||
console.log(`每页 ${val} 条`)
|
||
},
|
||
handleCurrentChange(val) {
|
||
console.log(`当前页: ${val}`)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|