Merge remote-tracking branch 'iview-2.0/2.0' into 2.0
This commit is contained in:
Lawrence Lee
commit
f3cbb62b93
5 changed files with 150 additions and 155 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://www.iviewui.com">
|
<a href="https://www.iviewui.com">
|
||||||
<img width="200" src="https://raw.githubusercontent.com/iview/iview/master/assets/logo.png">
|
<img width="200" src="https://file.iviewui.com/logo.svg">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
- Dozens of useful and beautiful components.
|
- Dozens of useful and beautiful components.
|
||||||
- Friendly API. It's made for people with all skill levels.
|
- Friendly API. It's made for people with all skill levels.
|
||||||
- Extensive documentation.
|
- Extensive documentation.
|
||||||
- It is quite beautiful
|
- It is quite beautiful.
|
||||||
- Support Vue.js 2 and Vue.js 1.
|
- Support Vue.js 2 and Vue.js 1.
|
||||||
|
|
||||||
## Programming
|
## Programming
|
||||||
|
|
|
||||||
15
assets/logo.svg
Normal file
15
assets/logo.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#3399FF;}
|
||||||
|
.st1{fill:#00CC99;}
|
||||||
|
</style>
|
||||||
|
<polygon id="XMLID_85_" class="st0" points="59.1,12.3 19.2,12.3 25.4,21.4 53,21.4 49.5,26.6 39.2,41.9 44.7,50.1 60.6,26.6
|
||||||
|
64.1,21.4 70.3,12.3 "/>
|
||||||
|
<g id="XMLID_36_">
|
||||||
|
<polygon id="XMLID_57_" class="st1" points="41.5,54.9 36,46.6 36,46.6 22.4,26.6 11.3,26.6 30.4,54.9 30.4,54.9 36,63.1 "/>
|
||||||
|
<polygon id="XMLID_44_" class="st1" points="12.8,12.3 1.7,12.3 7.8,21.4 19,21.4 "/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 825 B |
|
|
@ -1,16 +1,40 @@
|
||||||
<template>
|
<template>
|
||||||
<div>{{ row.name }}</div>
|
<Select v-model="model1" style="width:200px">
|
||||||
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
|
</Select>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
data () {
|
||||||
row: Object
|
return {
|
||||||
},
|
cityList: [
|
||||||
mounted () {
|
{
|
||||||
// console.log(1);
|
value: 'beijing',
|
||||||
},
|
label: '北京市'
|
||||||
beforeDestroy () {
|
},
|
||||||
// console.log(2);
|
{
|
||||||
|
value: 'shanghai',
|
||||||
|
label: '上海市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'shenzhen',
|
||||||
|
label: '深圳市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'hangzhou',
|
||||||
|
label: '杭州市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'nanjing',
|
||||||
|
label: '南京市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'chongqing',
|
||||||
|
label: '重庆市'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
model1: ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,159 +1,115 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<Table width="550" border highlight-row @on-selection-change="change2" @on-current-change="change1" :columns="columns2" :data="data3"></Table>
|
||||||
<div style="margin: 10px">
|
|
||||||
显示边框 <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
|
|
||||||
显示斑马纹 <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
|
|
||||||
显示索引 <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
|
|
||||||
显示多选框 <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
|
|
||||||
显示表头 <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
|
|
||||||
表格滚动 <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
表格尺寸
|
|
||||||
<Radio-group v-model="tableSize" type="button">
|
|
||||||
<Radio label="large">大</Radio>
|
|
||||||
<Radio label="default">中</Radio>
|
|
||||||
<Radio label="small">小</Radio>
|
|
||||||
</Radio-group>
|
|
||||||
</div>
|
|
||||||
<Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
tableData3: [
|
columns2: [
|
||||||
{
|
{
|
||||||
name: '王小明',
|
|
||||||
age: 18,
|
|
||||||
address: '北京市朝阳区芍药居',
|
|
||||||
date: '2016-10-03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张小刚',
|
|
||||||
age: 24,
|
|
||||||
address: '北京市海淀区西二旗',
|
|
||||||
date: '2016-10-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '李小红',
|
|
||||||
age: 30,
|
|
||||||
address: '上海市浦东新区世纪大道',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周小伟',
|
|
||||||
age: 26,
|
|
||||||
address: '深圳市南山区深南大道',
|
|
||||||
date: '2016-10-04'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '王小明',
|
|
||||||
age: 18,
|
|
||||||
address: '北京市朝阳区芍药居',
|
|
||||||
date: '2016-10-03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张小刚',
|
|
||||||
age: 24,
|
|
||||||
address: '北京市海淀区西二旗',
|
|
||||||
date: '2016-10-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '李小红',
|
|
||||||
age: 30,
|
|
||||||
address: '上海市浦东新区世纪大道',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周小伟',
|
|
||||||
age: 26,
|
|
||||||
address: '深圳市南山区深南大道',
|
|
||||||
date: '2016-10-04'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
showBorder: false,
|
|
||||||
showStripe: false,
|
|
||||||
showHeader: true,
|
|
||||||
showIndex: true,
|
|
||||||
showCheckbox: false,
|
|
||||||
fixedHeader: false,
|
|
||||||
tableSize: 'default'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
tableColumns3 () {
|
|
||||||
let columns = [];
|
|
||||||
if (this.showCheckbox) {
|
|
||||||
columns.push({
|
|
||||||
type: 'selection',
|
type: 'selection',
|
||||||
width: 60,
|
width: 60,
|
||||||
align: 'center'
|
align: 'center'
|
||||||
})
|
},
|
||||||
}
|
{
|
||||||
if (this.showIndex) {
|
title: '姓名',
|
||||||
columns.push({
|
key: 'name',
|
||||||
type: 'index',
|
width: 100,
|
||||||
width: 60,
|
fixed: 'left'
|
||||||
align: 'center'
|
},
|
||||||
})
|
{
|
||||||
}
|
title: '年龄',
|
||||||
columns.push({
|
key: 'age',
|
||||||
title: '日期',
|
width: 100
|
||||||
key: 'date',
|
},
|
||||||
sortable: true
|
{
|
||||||
});
|
title: '省份',
|
||||||
columns.push({
|
key: 'province',
|
||||||
title: '姓名',
|
width: 100
|
||||||
key: 'name'
|
},
|
||||||
});
|
{
|
||||||
columns.push({
|
title: '市区',
|
||||||
title: '年龄',
|
key: 'city',
|
||||||
key: 'age',
|
width: 100
|
||||||
sortable: true,
|
},
|
||||||
filters: [
|
{
|
||||||
{
|
title: '地址',
|
||||||
label: '大于25岁',
|
key: 'address',
|
||||||
value: 1
|
width: 200
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '小于25岁',
|
title: '邮编',
|
||||||
value: 2
|
key: 'zip',
|
||||||
}
|
width: 100
|
||||||
],
|
},
|
||||||
filterMultiple: false,
|
{
|
||||||
filterMethod (value, row) {
|
title: '操作',
|
||||||
if (value === 1) {
|
key: 'action',
|
||||||
return row.age > 25;
|
fixed: 'right',
|
||||||
} else if (value === 2) {
|
width: 120,
|
||||||
return row.age < 25;
|
render: (h, params) => {
|
||||||
|
return h('div', [
|
||||||
|
h('Button', {
|
||||||
|
props: {
|
||||||
|
type: 'text',
|
||||||
|
size: 'small'
|
||||||
|
}
|
||||||
|
}, '查看'),
|
||||||
|
h('Button', {
|
||||||
|
props: {
|
||||||
|
type: 'text',
|
||||||
|
size: 'small'
|
||||||
|
}
|
||||||
|
}, '编辑')
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
],
|
||||||
columns.push({
|
data3: [
|
||||||
title: '地址',
|
{
|
||||||
key: 'address',
|
name: '王小明',
|
||||||
filters: [
|
age: 18,
|
||||||
{
|
address: '北京市朝阳区芍药居',
|
||||||
label: '北京',
|
province: '北京市',
|
||||||
value: '北京'
|
city: '朝阳区',
|
||||||
},
|
zip: 100000
|
||||||
{
|
},
|
||||||
label: '上海',
|
{
|
||||||
value: '上海'
|
name: '张小刚',
|
||||||
},
|
age: 25,
|
||||||
{
|
address: '北京市海淀区西二旗',
|
||||||
label: '深圳',
|
province: '北京市',
|
||||||
value: '深圳'
|
city: '海淀区',
|
||||||
}
|
zip: 100000
|
||||||
],
|
},
|
||||||
filterMethod (value, row) {
|
{
|
||||||
return row.address.indexOf(value) > -1;
|
name: '李小红',
|
||||||
|
age: 30,
|
||||||
|
address: '上海市浦东新区世纪大道',
|
||||||
|
province: '上海市',
|
||||||
|
city: '浦东新区',
|
||||||
|
zip: 100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '周小伟',
|
||||||
|
age: 26,
|
||||||
|
address: '深圳市南山区深南大道',
|
||||||
|
province: '广东',
|
||||||
|
city: '南山区',
|
||||||
|
zip: 100000
|
||||||
}
|
}
|
||||||
});
|
]
|
||||||
return columns;
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
change1 (d, l) {
|
||||||
|
// console.log(d)
|
||||||
|
// console.log(l)
|
||||||
|
},
|
||||||
|
change2 (d, l) {
|
||||||
|
console.log(d);
|
||||||
|
console.log(l);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
:prefix-cls="prefixCls"
|
:prefix-cls="prefixCls"
|
||||||
@mouseenter.native.stop="handleMouseIn(row._index)"
|
@mouseenter.native.stop="handleMouseIn(row._index)"
|
||||||
@mouseleave.native.stop="handleMouseOut(row._index)"
|
@mouseleave.native.stop="handleMouseOut(row._index)"
|
||||||
@click.native.stop="clickCurrentRow(row._index)"
|
@click.native="clickCurrentRow(row._index)"
|
||||||
@dblclick.native.stop="dblclickCurrentRow(row._index)">
|
@dblclick.native.stop="dblclickCurrentRow(row._index)">
|
||||||
<td v-for="column in columns" :class="alignCls(column, row)">
|
<td v-for="column in columns" :class="alignCls(column, row)">
|
||||||
<Cell
|
<Cell
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue