梁灏
parent
e3e8335fae
commit
d509d2b2af
4 changed files with 61 additions and 88 deletions
|
|
@ -479,7 +479,7 @@
|
|||
this.query = query;
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
compiled () {
|
||||
if (!this.multiple && this.filterable && this.model) {
|
||||
this.findChild((child) => {
|
||||
if (this.model === child.value) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
vertical-align: middle;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
position: relative;
|
||||
//position: relative;
|
||||
line-height: normal;
|
||||
|
||||
&-selection {
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
outline: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: @btn-border-radius;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ import Vue from 'vue';
|
|||
import VueRouter from 'vue-router';
|
||||
import App from './app.vue';
|
||||
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(iView, { locale });
|
||||
Vue.use(iView);
|
||||
|
||||
// 开启debug模式
|
||||
Vue.config.debug = true;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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-select :model.sync="model1" style="width:200px">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<i-table border :content="self" :columns="columns7" :data="data6"></i-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
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: '姓名',
|
||||
key: 'name'
|
||||
key: 'name',
|
||||
render (row, column, index) {
|
||||
return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
|
|
@ -48,24 +51,21 @@
|
|||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
columns9: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
className: 'demo-table-info-column'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
render (row, column, index) {
|
||||
return `
|
||||
<i-select :model.sync="model1" style="width:200px">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select><br><br><br>
|
||||
`;
|
||||
}
|
||||
}
|
||||
],
|
||||
data1: [
|
||||
data6: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
|
|
@ -86,46 +86,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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue