Skip to content

E
exam-commond-oldPro
Commit 824fe907 by zhangzhongjie
Options

列表页面搜索区域添加详细规则提示，表示区域初步完成提交

parent 16345ca0
Showing with 256 additions and 7 deletions
iview-admin-pro-template/src/menu/modules/list.js
......@@ -9,6 +9,10 @@ export default {
{
path: `${pre}list-search`,
title: '搜索区域'
},
{
path: `${pre}list-table`,
title: '表格区域'
}
]
}
iview-admin-pro-template/src/pages/list/list-search/index.vue
<template>
<div>
<h1>查询表格搜索区域示例</h1>
<div>
<p>请结合iview组件使用,<a href="https://www.iviewui.com/components/tabs" target="_blank">tabs标签页</a>，<a href="https://www.iviewui.com/components/select">选择器</a>,<a href="https://www.iviewui.com/components/input" target="_blank">输入框</a>，<a href="https://www.iviewui.com/components/button" target="_blank">按钮</a></p>
<p>1.条件筛选区域只有一个tab，把其他条件筛选都放到tab里面</p>
<p>2.筛选只有一行，多出来的折叠隐藏掉</p>
</div>
<div class="my-tab">
<Tabs value="name1">
<TabPane label="基础信息" name="name1">
......@@ -35,10 +39,10 @@
<script>
import listData from './data'
export default {
name: 'list-list-1',
name: 'list-list-search',
data () {
return {
loading: false,
loading: false, // 判断页面加载
selectList: [], // 数据
seaVal: '', // 搜索值
isHide: true // 控制被折叠的内容显示和隐藏
......@@ -49,11 +53,10 @@
this.isHide = !this.isHide
},
getData () { // 初始化数据
this.loading = true;
setTimeout(() => {
this.loading = false;
if (!this.loading) {
this.selectList = listData;
}, 1000);
this.loading = true;
}
}
},
mounted () {
......
iview-admin-pro-template/src/pages/list/list-table/data.js 0 → 100644
export default{
columns2: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '商品编码/平台账号/平台SKU',
key: 'age',
width: 100
},
{
title: '图片',
key: 'src',
width: 90,
render: (h, params) => {
return h('img', {
attrs: {
src: params.row.src
},
style: {
width: '50px',
height: '50px'
}
})
}
},
{
title: '刊登来源',
key: 'city',
width: 100,
sortable: true
},
{
title: '站点/发货地',
key: 'address',
width: 200,
sortable: true
},
{
title: 'itemid',
key: 'zip',
width: 90,
sortable: true
},
{
title: '标题',
key: 'name',
width: 100,
sortable: true
},
{
title: '价格',
key: 'name',
width: 100
},
{
title: '上架时间段',
key: 'name',
width: 100
},
{
title: '物流信息',
key: 'name',
width: 100,
sortable: true
},
{
title: '广告费比例',
key: 'name',
width: 120,
sortable: true
},
{
title: '昨日销量',
key: 'name',
width: 120,
sortable: true
},
{
title: '昨日点击量',
key: 'name',
width: 120
},
{
title: '昨日转化',
key: 'name',
width: 100
},
{
title: '在线数',
key: 'name',
width: 100
},
{
title: '历史售出',
key: 'name',
width: 100
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 130,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
},
style: {
border: '1px solid #dcdee2',
marginRight: '5px'
}
}, 'View'),
h('Button', {
props: {
type: 'text',
size: 'small'
},
style: {
border: '1px solid #dcdee2'
}
}, 'Edit')
]);
}
}
],
data3: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
src: 'http://img.blsct.com/8bf18d95-98d7-4f3f-af84-e31a4573eaab.JPG?imageView2/2/w/100/h/100/q/75|imageslim',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
src: 'http://img.blsct.com/9286a9e8-b260-48eb-b895-3e8188c20463.jpg?imageView2/2/w/100/h/100/q/75|imageslim',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
src: 'http://img.blsct.com/c505782f-e994-4afc-b092-f654b1b111f0.jpg?imageMogr2/thumbnail/!550x550r/blur/1x0/quality/75',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
src: 'http://img.blsct.com/f233412b-3e82-452e-92a6-4bdbc5a61b8e.jpg?imageView2/2/w/100/h/100/q/75|imageslim',
city: 'Ottawa',
zip: 100000
}
]
};
iview-admin-pro-template/src/pages/list/list-table/index.vue 0 → 100644
<template>
<div>
<div class="tip">
<p>请结合iview组件使用，<a href="https://www.iviewui.com/components/table#PX" target="_blank">https://www.iviewui.com/components/table#PX</a></p>
<p>1.当单元格内容过多时，通过增加列宽，设置columns2的width属性，来放置更多内容</p>
<p>2.操作列固定在右边，内容横向排列</p>
<p>3.列标题和筛选功能垂直居中排列</p>
<p>4.如果表格直接放置到页面上，不要设置纵向滚动</p>
<p>5.图片为50px左右，不要太大</p>
<p>6.多选框列在最左边</p>
</div>
<div class="my-table">
<Table
border :columns="columns2" :data="data3" stripe>
</Table>
</div>
</div>
</template>
<script>
import dataList from './data'
export default {
name: 'list-list-table',
data () {
return {
columns2: [],
data3: []
}
},
methods: {
// 初始化数据
getData ({ columns2, data3 } = { columns2: dataList.columns2, data3: dataList.data3 }) {
this.columns2 = columns2
this.data3 = data3
}
},
created () {
// 初始化数据
this.getData()
}
}
</script>
<style lang="less">
.my-table{
thead{
.ivu-table-cell{
display: flex;
align-items: center;
}
tr{
th:first-child .ivu-table-cell{
display: inline-block;
}
}
}
.ivu-table{
font-size: 13px;
}
.ivu-table-cell{
padding-left: 14px;
padding-right: 14px;
}
}
</style>
iview-admin-pro-template/src/router/modules/list.js
......@@ -23,6 +23,14 @@ export default {
title: '搜索区域'
},
component: () => import('@/pages/list/list-search')
},
{
path: 'list-table',
name: `${pre}list-table`,
meta: {
title: '表格区域'
},
component: () => import('@/pages/list/list-table')
}
]
}
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