以下介绍 iview - table slot-scope 两种方法，根据不同状态改变内容颜色(1. 动态追加render函数， 2. 在columns里根据数组存储状态数据循环判断显示)，以及动态实现序号的显示和隐藏功能
效果图
- 动态追加render函数
<template>
<div>
<Button @click="handleShowIndex()">
{
{
indexShow ? '隐藏序号': '显示序号'}}
</Button>
<Button @click="addRender()">
给状态列动态添加render
</Button>
<Table :columns="columns" :data="data">
<template v-for="item in columns" slot-scope="{ row, index }" :slot="item.slot">
<span> {
{
row[item.slot]}}</span>
</template>
</Table>
</div>
</template>
<script>
export default {
mounted(){
//定时器模拟动态添加数据
setTimeout(()=>{
this.columns = [
{
title: '姓名',
slot: 'name',
},
{
title: '状态',
slot: 'state',
},
{
title: '地址',
slot: 'address'
}
]
this.data = [
{
name: '王小明',
state: '小学',
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
state: '初中',
address: '北京市海淀区西二旗'
},
{
name: '李小红',
state: '高中',
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
state: '大学',
address: '深圳市南山区深南大道'
}
]
},3000)
},
data () {
return {
indexShow: false,
total: 10,
current: 1,
pageSize: 5,
columns: [],
data: []
}
},
methods:{
handleShowIndex(){
this.indexShow = !this.indexShow;
if(this.indexShow){
this.columns.unshift({
type: 'index',
title: '序号',
width: 70,
align: 'center',
indexMethod: (row) => {
return (row._index + 1) + (this.pageSize * this.current) - this.pageSize;
}
});
}else {
this.columns.forEach((item,i)=>{
if(this.columns[i].type == 'index' ){
this.columns.splice(i,1);
}
})
}
},
addRender(){
for(let i =0; i< this.columns.length; i++){
if(this.columns[i].slot == 'state'){
this.columns[i].render = (h, params) => {
return h('div', [
h('span', {
style: {
color: params.row.state == "初中" ? '#0a0' : ( params.row.state == "高中" ? '#f00' : '#666' )
}
},params.row.state)
]);
}
this.$set(this.columns, i, this.columns[i]);
}
}
}
}
}
</script>
- 根据数组存储状态数据循环判断显示
<template>
<div>
<Button @click="handleShowIndex()">
{
{
indexShow ? '隐藏序号': '显示序号'}}
</Button>
<Table :columns="columns" :data="data" style="margin-bottom: 20px">
<template v-for="item in columns" slot-scope="{ row, index }" :slot="item.slot">
<div v-if="item.stateArr" :style="{color: columnColor(item.stateArr,data[index][item.slot]) == null ? '#ddd' : columnColor(item.stateArr,data[index][item.slot])}">
<span> {
{
row[item.slot]}} </span>
</div>
<div v-if="!item.stateArr">
<span> {
{
row[item.slot]}} </span>
</div>
</template>
</Table>
</div>
</template>
<script>
export default {
mounted(){
setTimeout(()=>{
this.columns = [
{
title: '姓名',
slot: 'name'
},
{
title: '状态',
slot: 'state',
//用数组存储状态数据
stateArr:[
{
text: '初中', color:'#0a0'},
{
text: '高中', color: '#f00'}
]
},
{
title: '地址',
slot: 'address'
}
]
this.data = [
{
name: '王小明',
state: '小学',
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
state: '初中',
address: '北京市海淀区西二旗'
},
{
name: '李小红',
state: '高中',
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
state: '大学',
address: '深圳市南山区深南大道'
}
]
},3000)
},
data () {
return {
indexShow: false,
total: 10,
current: 1,
pageSize: 5,
columns: [],
data: [ ]
}
},
methods:{
columnColor(list,data){
let color = null;
for(let i = 0; i < list.length; i++){
if(list[i].text == data){
color = list[i].color;
}
}
return color;
},
handleShowIndex(){
this.indexShow = !this.indexShow;
if(this.indexShow){
this.columns.unshift({
type: 'index',
title: '序号',
width: 70,
align: 'center',
indexMethod: (row) => {
return (row._index + 1) + (this.pageSize * this.current) - this.pageSize;
}
});
}else {
this.columns.forEach((item,i)=>{
if(this.columns[i].type == 'index' ){
this.columns.splice(i,1);
}
})
}
}
}
}
</script>