iview - table slot-scope 根据不同状态改变内容颜色(动态追加render函数)

以下介绍 iview - table slot-scope 两种方法，根据不同状态改变内容颜色(1. 动态追加render函数， 2. 在columns里根据数组存储状态数据循环判断显示)，以及动态实现序号的显示和隐藏功能

效果图

1. 动态追加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>

2. 根据数组存储状态数据循环判断显示

<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>