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 },
标签：vue,return,render,connectstr,表头,params,props,row From： https://www.cnblogs.com/ysx215/p/17434195.html