梁灏
parent
4ab118119a
commit
d5d4d8e3e9
2 changed files with 47 additions and 87 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
.@{dropdown-prefix-cls} {
|
.@{dropdown-prefix-cls} {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
//position: relative;
|
||||||
|
|
||||||
.@{select-dropdown-prefix-cls} {
|
.@{select-dropdown-prefix-cls} {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
&-rel{
|
&-rel{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-menu{
|
&-menu{
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<template>
|
||||||
<p>自定义行样式：</p>
|
<i-table border :content="self" :columns="columns7" :data="data6"></i-table>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
columns1: [
|
self: this,
|
||||||
|
columns7: [
|
||||||
{
|
{
|
||||||
title: '姓名',
|
title: '姓名',
|
||||||
key: 'name'
|
key: 'name',
|
||||||
|
render (row, column, index) {
|
||||||
|
return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '年龄',
|
title: '年龄',
|
||||||
|
|
@ -48,25 +20,40 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '地址',
|
title: '地址',
|
||||||
key: 'address'
|
key: 'address',
|
||||||
}
|
render () {
|
||||||
],
|
return `
|
||||||
columns9: [
|
<Poptip title="提示标题" content="提示内容" placement="bottom-end">
|
||||||
{
|
<i-button>click 激活</i-button>
|
||||||
title: '姓名',
|
</Poptip>
|
||||||
key: 'name'
|
`
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '年龄',
|
title: '操作',
|
||||||
key: 'age',
|
key: 'action',
|
||||||
className: 'demo-table-info-column'
|
width: 150,
|
||||||
},
|
align: 'center',
|
||||||
{
|
render (row, column, index) {
|
||||||
title: '地址',
|
return `
|
||||||
key: 'address'
|
<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: '王小明',
|
name: '王小明',
|
||||||
age: 18,
|
age: 18,
|
||||||
|
|
@ -87,46 +74,18 @@
|
||||||
age: 26,
|
age: 26,
|
||||||
address: '深圳市南山区深南大道'
|
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: {
|
methods: {
|
||||||
rowClassName (row, index) {
|
show (index) {
|
||||||
if (index === 1) {
|
this.$Modal.info({
|
||||||
return 'demo-table-info-row';
|
title: '用户信息',
|
||||||
} else if (index === 3) {
|
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
|
||||||
return 'demo-table-error-row';
|
})
|
||||||
}
|
},
|
||||||
return '';
|
remove (index) {
|
||||||
|
this.data6.splice(index, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue