vue iview render函数渲染table表头和列表内容 

  1 computed:{
  2   tableColumns(){
  3     return [
  4       {
  5         title: "封面",
  6         key: "pageImage",
  7         render: (h, params) => {
  8           return h("img", {
  9             style: {
 10               height: "40px"
 11             },
 12             domProps: {
 13               src: params.row.pageImage
 14             },
 15             on: {
 16               click: () => {
 17                 this.$refs.preview.imgDetail(params.row.pageImage)
 18               },
 19             }
 20           });
 21         },
 22       },
 23       {
 24         title: "内容",
 25         key: "model",
 26         render: (h, params) => {
 27           let connects = params.row.connects;
 28           let connectstr = '';
 29           let texts = '';
 30           if(connects.length > 0){
 31             connects.forEach(item => {
 32               connectstr += item.connect + "<br />"
 33             })
 34           }
 35           if(connectstr.length > 5){
 36             texts = connectstr.slice(0,5)+'...'  //进行数字截取
 37           }else{
 38             texts = connectstr
 39           }
 40           return h('div', [
 41             h('Tooltip', {
 42               props: {
 43                   placement: 'top',
 44                   transfer: true
 45               }
 46               },[texts,h('span',{
 47                   slot:'content',
 48                   style:{
 49                     whiteSpace:'normal'
 50                   },
 51                   domProps:{
 52                     innerHTML:connectstr
 53                   }
 54               })
 55             ])
 56           ])
 57         }
 58       },
 59       {
 60         title: '状态',
 61         key: 'status',
 62         minWidth: 120,
 63         render: (h, params) => {
 64           return h('i-switch', {
 65             props: {
 66               size: 'large',
 67               value: params.row.enableStatus ? true : false,
 68               // beforeChange:this.handleBeforeChange
 69             },
 70             on: {
 71               'on-change': (val) => {
 72                 console.log('on-change',val);
 73                 this.toggleStatus(params.row);
 74               },
 75             }
 76           }, [
 77             h('span', { slot: 'open' }, '启用'),
 78             h('span', { slot: 'close' }, '禁用'),
 79           ]);
 80         },
 81       },
 82       {
 83         slot:'action',
 84         renderHeader: (h, params) => {
 85           return h('Tooltip', {
 86             props: { 
 87               placement: 'top',
 88               transfer:true,//首先提示框一直被th遮挡，添加此属性后就不在被遮挡
 89     　　　     'max-width':"300",//设最大宽度，添加此属性后文字太长会换行，否则浮窗里只会显示一些文字，多余的文字在浮窗外且看不见
 90     　　　　}
 91     　　　}, [
 92           h('span', [
 93             h('span', '操作'),
 94             h('Icon', {
 95               props:{
 96                 type:'ios-information-circle',
 97                 size:'20'
 98               },
 99               style:{
100                 verticalAlign: 'middle',
101                 color:'#515a6e'
102               },
103             })
104           ]),
105           h('span', {
106               slot: 'content',
107             }, '鼠标移入时显示提示信息')
108           ])
109         },
110         tooltip: true,
111         fixed: 'right',
112         width: 300,
113         render: (h, params) => {
114           return h('div', [
115             h('Button', {
116               props: {
117                 type: 'text',
118                 size: 'small',
119               },
120 
121               on: {
122                 click: () => {
123                   this.edit(params.row);
124                 },
125               },
126             }, '编辑'),
127             h('Button', {
128               props: {
129                 type: 'text',
130                 size: 'small',
131               },
132 
133               on: {
134                 click: () => {
135                   this.delete(params.row);
136                 },
137               },
138             }, '删除')
139           ]);
140         },
141       },
142     ]
143   }
144 },

 

posted @ 2023-05-26 11:00  ysx_小鱼  阅读(372)  评论(0)    收藏  举报