iview-table展示图片和按钮

1、首先引用table：

2、返回table数据

3、使用render函数设置table的返回数据

4、render函数创建a标签跳转

this.columns1 = [
{title:"组件所在页面链接",key:"componentLink",
  render:(h,params,) => {
    let url = params.row.appShopLink;
    if (url === null) {
      url = params.row.appActivityLink;
    }else if (url === null){
      url = params.row.pcShopLink;
    }else if (url === null){
      url = params.row.pcActivityLink;
    }
    return h('a',{
      attrs:{href:url}
    },url);
  }}];

5、Menu、v-for循环、v-model数据控制

  11111
  22222
  33333

   

     
       
         

           
             {{item.title}}
           
         
         

       
     
   
 

export default {
  data(){
    return {
      imgMap: {
        appProduct: [{displayForm:"106",title:"AAA",src:icon4},{displayForm:"101",title:"BBB",src:icon6}],
        appPicture: [{title:"CCC",src:icon5},{title:"DDD",src:icon14},{title:"EEE",src:icon20}}],
        appMarketing: [{title:"FFF",src:icon8},{title:"GGG",src:icon24}]
      },
      activeName: "appProduct",
      show: false,
      checkList:"",
    }
  },
  computed: {
    imgArrShow(){
      return this.imgMap[this.activeName]
    }
  },
  methods: {
    onMenuSelect:function(name){
      this.activeName = name;
      this.checkList = [];
      this.data1 = [];
    }

}