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