drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #188

Browse source 
fixed #188
This commit is contained in:
梁灏 2017-01-12 09:13:52 +08:00
parent 4ab118119a
commit d5d4d8e3e9
2 changed files with 47 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/styles/components/dropdown.less
View file

@ -3,7 +3,7 @@
.@{dropdown-prefix-cls} {
display: inline-block;
position: relative;
//position: relative;
.@{select-dropdown-prefix-cls} {
overflow: visible;
@ -15,6 +15,7 @@
&-rel{
display: inline-block;
position: relative;
}
&-menu{

131
test/routers/table.vue
View file

@ -1,46 +1,18 @@
<style>
.ivu-table .demo-table-info-row td{
background-color: #2db7f5;
color: #fff;
}
.ivu-table .demo-table-error-row td{
background-color: #ff6600;
color: #fff;
}
.ivu-table .demo-table-info-column{
background-color: #2db7f5;
color: #fff;
border-bottom: 1px solid #2db7f5;
}
.ivu-table .demo-table-info-cell-name {
background-color: #2db7f5;
color: #fff;
}
.ivu-table .demo-table-info-cell-age {
background-color: #ff6600;
color: #fff;
}
.ivu-table .demo-table-info-cell-address {
background-color: #187;
color: #fff;
}
</style>
<template>
<p>自定义行样式：</p>
<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
<p>自定义列样式：</p>
<i-table :columns="columns9" :data="data1"></i-table>
<p>自定义任意单元格样式：</p>
<i-table :columns="columns1" :data="data8"></i-table>
<i-table border :content="self" :columns="columns7" :data="data6"></i-table>
</template>
<script>
export default {
data () {
return {
columns1: [
self: this,
columns7: [
{
title: '姓名',
key: 'name'
key: 'name',
render (row, column, index) {
return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
}
},
{
title: '年龄',
@ -48,25 +20,40 @@
},
{
title: '地址',
key: 'address'
}
],
columns9: [
{
title: '姓名',
key: 'name'
key: 'address',
render () {
return `
<Poptip title="提示标题" content="提示内容" placement="bottom-end">
<i-button>click 激活</i-button>
</Poptip>
`
}
},
{
title: '年龄',
key: 'age',
className: 'demo-table-info-column'
},
{
title: '地址',
key: 'address'
title: '操作',
key: 'action',
width: 150,
align: 'center',
render (row, column, index) {
return `
<Dropdown trigger="click" style="margin-left: 20px">
<a href="javascript:void(0)">
click 触发
<Icon type="arrow-down-b"></Icon>
</a>
<Dropdown-menu slot="list">
<Dropdown-item>驴打滚</Dropdown-item>
<Dropdown-item>炸酱面</Dropdown-item>
<Dropdown-item>豆汁儿</Dropdown-item>
<Dropdown-item>冰糖葫芦</Dropdown-item>
<Dropdown-item>北京烤鸭</Dropdown-item>
</Dropdown-menu>
</Dropdown><br><br><br><br><br>
`;
}
}
],
data1: [
data6: [
{
name: '王小明',
age: 18,
@ -87,46 +74,18 @@
age: 26,
address: '深圳市南山区深南大道'
}
],
data8: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
cellClassName: {
age: 'demo-table-info-cell-age',
address: 'demo-table-info-cell-address'
}
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
cellClassName: {
name: 'demo-table-info-cell-name'
}
}
]
}
},
methods: {
rowClassName (row, index) {
if (index === 1) {
return 'demo-table-info-row';
} else if (index === 3) {
return 'demo-table-error-row';
}
return '';
show (index) {
this.$Modal.info({
title: '用户信息',
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
}
}