Skip to content

E
exam-commond-oldPro
Commit 11168467 by zhangzhongjie
Options

重新命名列表搜索区示例页面的导航title

parent fcc54c9d
Showing with 178 additions and 7 deletions
iview-admin-pro-template/src/menu/modules/list.js
...@@ -7,8 +7,8 @@ export default { ...@@ -7,8 +7,8 @@ export default {
custom: 'i-icon-demo i-icon-demo-list', custom: 'i-icon-demo i-icon-demo-list',
children: [ children: [
{ {
path: `${pre}list-1`, path: `${pre}list-search`,
title: 'list-1' title: '搜索区域'
} }
] ]
} }
iview-admin-pro-template/src/pages/list/list-search/data.js 0 → 100644
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' }]
}
];
iview-admin-pro-template/src/pages/list/list-search/index.vue 0 → 100644
<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>
iview-admin-pro-template/src/router/modules/list.js
...@@ -10,19 +10,19 @@ export default { ...@@ -10,19 +10,19 @@ export default {
path: '/list', path: '/list',
name: 'list', name: 'list',
redirect: { redirect: {
name: `${pre}list-1` name: `${pre}list-search`
}, },
meta, meta,
component: BasicLayout, component: BasicLayout,
children: [ children: [
{ {
path: 'list-1', path: 'list-search',
name: `${pre}list-1`, name: `${pre}list-search`,
meta: { meta: {
// ...meta, // ...meta,
title: 'list-1' title: '搜索区域'
}, },
component: () => import('@/pages/list/list-1') component: () => import('@/pages/list/list-search')
} }
] ]
} }
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