fixed #192
This commit is contained in:
梁灏 2017-01-12 18:04:55 +08:00
parent e3e8335fae
commit d509d2b2af
4 changed files with 61 additions and 88 deletions

View file

@ -479,7 +479,7 @@
this.query = query; this.query = query;
} }
}, },
ready () { compiled () {
if (!this.multiple && this.filterable && this.model) { if (!this.multiple && this.filterable && this.model) {
this.findChild((child) => { this.findChild((child) => {
if (this.model === child.value) { if (this.model === child.value) {

View file

@ -9,7 +9,7 @@
vertical-align: middle; vertical-align: middle;
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
position: relative; //position: relative;
line-height: normal; line-height: normal;
&-selection { &-selection {
@ -18,6 +18,7 @@
outline: none; outline: none;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
position: relative;
background-color: #fff; background-color: #fff;
border-radius: @btn-border-radius; border-radius: @btn-border-radius;

View file

@ -5,10 +5,10 @@ import Vue from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import App from './app.vue'; import App from './app.vue';
import iView from '../src/index'; import iView from '../src/index';
import locale from '../src/locale/lang/en-US'; // import locale from '../src/locale/lang/en-US';
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(iView, { locale }); Vue.use(iView);
// 开启debug模式 // 开启debug模式
Vue.config.debug = true; Vue.config.debug = true;

View file

@ -1,45 +1,48 @@
<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 td.demo-table-info-column{
background-color: #2db7f5;
color: #fff;
}
.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-select :model.sync="model1" style="width:200px">-->
<!--<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>--> <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
<p>自定义列样式</p> <!--</i-select>-->
<i-table :columns="columns9" :data="data1"></i-table> <i-table border :content="self" :columns="columns7" :data="data6"></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: [ cityList: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
],
model1: 'shanghai',
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,24 +51,21 @@
{ {
title: '地址', title: '地址',
key: 'address' key: 'address'
}
],
columns9: [
{
title: '姓名',
key: 'name'
}, },
{ {
title: '年龄', title: '操作',
key: 'age', key: 'action',
className: 'demo-table-info-column' align: 'center',
}, render (row, column, index) {
{ return `
title: '地址', <i-select :model.sync="model1" style="width:200px">
key: 'address' <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select><br><br><br>
`;
}
} }
], ],
data1: [ data6: [
{ {
name: '王小明', name: '王小明',
age: 18, age: 18,
@ -86,46 +86,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);
} }
} }
} }