<template>
<div>
<!
-- 条件查询
-->
<div>
<
el-form>
<!
-- 第一行
-->
<
el-row>
<
el-col :span="8">
<div>查询条件:</div>
</
el-col>
</
el-row>
<!
-- 第二行
-->
<
el-row>
<
el-col :span="6">
<
el-form
-item lab
el="卡号:">
<
el-input style="width: 180px;"></
el-input>
</
el-form
-item>
</
el-col>
<
el-col :span="6">
<
el-form
-item lab
el="至">
<
el-input style="width: 180px;"></
el-input>
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="卡状态">
<
el-s
elect value="1" style="width: 240px;">
<
el-option lab
el="状态一" value="keshiyi"></
el-option>
<
el-option lab
el="状态二" value="keshier"></
el-option>
</
el-s
elect>
</
el-form
-item>
</
el-col>
</
el-row>
<!
-- 第三行
-->
<
el-row>
<
el-col :span="6">
<
el-form
-item lab
el="导入日期:">
<
el-input style="width: 180px;"></
el-input>
</
el-form
-item>
</
el-col>
<
el-col :span="6">
<
el-form
-item lab
el="至">
<
el-input style="width: 180px;"></
el-input>
</
el-form
-item>
</
el-col>
<
el-col :span="2">
<
el-button type="primaty">查询</
el-button>
</
el-col>
<
el-col :span="2">
<
el-button type="primaty">卡入库</
el-button>
</
el-col>
</
el-row>
</
el-form>
</div>
<!
-- 表单
-->
<div>
<
el-table :data="tableData" style="width: 100%">
<
el-table
-column prop="date" lab
el="序号" width="50"></
el-table
-column>
<
el-table
-column prop="name" lab
el="卡号" width="100"></
el-table
-column>
<
el-table
-column prop="address" lab
el="导入日期"></
el-table
-column>
<
el-table
-column prop="address" lab
el="卡状态"></
el-table
-column>
<
el-table
-column prop="address" lab
el="操作"></
el-table
-column>
</
el-table>
</div>
<!
-- 分页
-->
<div>
<
el-pagination :current
-page="1"
:page
-sizes="[100, 200, 300, 400]" :page
-size="100" layout="total, sizes, prev, pager, next, jumper"
:total="400">
</
el-pagination>
</div>
<!
-- 卡入库
-->
<div>
<
el-form>
<!
-- 第一行
-->
<
el-row>
<
el-col :span="24" style="text
-align: center;">
<div><H2>卡入库</H2></div>
</
el-col>
</
el-row>
<!
-- 第二行
-->
<
el-row>
<
el-col :span="12" style="margin: 0 auto;">
<
el-form
-item lab
el="开始卡号:" style="text
-align: center;">
<
el-input style="width: 240px;"></
el-input>
</
el-form
-item>
</
el-col>
</
el-row>
</
el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '1',
name: '张三',
address: ''
}, {
date: '2',
name: '李四',
address: ''
}, {
date: '3',
name: '王五',
address: ''
}, {
date: '4',
name: '赵六',
address: ''
}]
}
}
}
</script>
<style>
.el-row {
margin
-bottom: 20px;
}
.el-col {
border
-radius: 4px;
}
.bg
-purple
-dark {
background: #99a9bf;
}
.bg
-purple {
background: #d3dce6;
}
.bg
-purple
-light {
background: #e5e9f2;
}
.grid
-content {
border
-radius: 4px;
min
-height: 36px;
}
.row-bg {
padding: 10px 0;
background
-color: #f9fafc;
}
</style>使卡入库和另外三个区域分为两个表格
扫一扫
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
