Commit 16345ca0 by zhangzhongjie

delete list-1文件夹

parent 11168467
export default [
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
},
{
model: '', default: '开发员', empList: [{ value: '员工A', label: '员工A' }, { value: '员工B', label: '员工B' }, { value: '员工C', label: '员工C' }, { value: '员工D', label: '员工D' }, { value: '员工E', label: '员工E' }, { value: '员工F', label: '员工F' }]
}
];
<template>
<div>
<h1>查询表格搜索区域示例</h1>
<div class="my-tab">
<Tabs value="name1">
<TabPane label="基础信息" name="name1">
<div class="tab-con">
<div class="tab-con-sel-box">
<div class="tab-con-sel" v-bind:class="{tabSelShow:isHide}">
<div v-for="(item,index) in selectList" v-bind:key="index" class="single-sel">
<Select v-model="item.model" style="width:auto;" :placeholder="item.default">
<Option v-for="elem in item.empList" :value="elem.value" v-bind:key="elem.value">{{ elem.label }}</Option>
</Select>
</div>
</div>
<div class="tab-show-hide" @click="onShow">
<span>展开</span><Icon type="ios-arrow-down" color="blue"/>
</div>
</div>
<div class="tab-con-opera">
<Input v-model="seaVal" placeholder="请输入查询内容" style="width: 186px;margin-right:8px;" />
<Button type="primary" style="margin-right:4px">查询</Button>
<Button type="primary">清除筛选</Button>
</div>
</div>
</TabPane>
<TabPane label="仓库模块" name="name2">仓库模块的相关筛选</TabPane>
<TabPane label="刊登" name="name3">刊登模块相关筛选</TabPane>
<TabPane label="地区" name="name4">地区相关筛选</TabPane>
<TabPane label="更多信息" name="name5">其他刷选</TabPane>
</Tabs>
</div>
</div>
</template>
<script>
import listData from './data'
export default {
name: 'list-list-1',
data () {
return {
loading: false,
selectList: [], // 数据
seaVal: '', // 搜索值
isHide: true // 控制被折叠的内容显示和隐藏
}
},
methods: {
onShow () { // 控制展开和隐藏
this.isHide = !this.isHide
},
getData () { // 初始化数据
this.loading = true;
setTimeout(() => {
this.loading = false;
this.selectList = listData;
}, 1000);
}
},
mounted () {
this.getData();
}
}
</script>
<style lang="less">
.my-tab{
.ivu-tabs{
overflow: visible;
}
.ivu-select{
color:#000;
}
width: 100%;
.tab-con{
display: flex;
justify-content: space-between;
.tab-con-opera{
width: 346px;
flex-shrink: 0;
}
.tab-con-sel-box{
display: flex;
// justify-content: space-between;
.tab-show-hide{
width: 80px;
flex-shrink: 0;
cursor: pointer;
}
.tab-con-sel{
transition: all .3s linear;
display: flex;
flex-wrap: wrap;
height:34px;
.ivu-select-dropdown{
overflow: visible;
}
.single-sel{
margin:0 5px 5px 0;
}
}
.tabSelShow{
overflow-y: hidden;
}
.ivu-select-single .ivu-select-selection .ivu-select-placeholder{
color:#515a6e;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment