IVIEW組件的render方法在Table組件中的使用

後端項目地址：https://gitee.com/wlovet/table-server

前端項目地址:  https://gitee.com/wlovet/table-project

1、Render函數之Table加入IVIEW組件與表格修改

render函數能夠在表格中除了能夠加入html組件還有iview組件，使用方法是在定義列的時候使用元素構造對象h渲染新元素

1 render:(h,params)=>{
2   return h('div',{
3 　　props:{
4 　　},
5    style:{
6    }
7   },params.row)      
8 }

支持修改則在表格列中加入

 1 {
 2   title: '操做',
 3   key: 'action',
 4   width: 200,
 5   render: (h, params) => {
 6     return h('div', [
 7       h('Button', {
 8         props: {
 9           type: params.row.$isEdit ? 'warning' : 'info',
10           size: 'small',
11           icon: ''
12         },
13         style: {
14           marginRight: '5px',
15         },
16         on: {
17           click: () => {
18             if (params.row.$isEdit) {
19               this.handleSave(params.row);
20             } else {
21               this.handleEdit(params.row);
22             }
23           }
24         }
25       },params.row.$isEdit? '保存':'修改'),
26       h('Poptip', {
27         props: {
28           confirm: true,
29           title: '是否要刪除此字段？',
30           transfer: true
31         },
32         on: {
33           'on-ok': () => {
34            //刪除邏輯
35           }
36         },
37       }, [
38         h('Button', {
39           props: {
40             type: 'error',
41             size: 'small'
42           },
43           style: {
44             marginRight: '5px'
45           },
46         }, '刪除')
47       ]),
48     ])
49   }
50 }

在methods屬性中加入兩個方法handleEdit、handleSave

1 //點擊了修改按鈕
2 handleEdit(row) {
3   this.$set(row, "$isEdit", true);
4 },
5 //點擊了保存按鈕
6 handleSave(row) {
7   this.$set(row, "$isEdit", false);
8 }

2、Render函數之Table單元格加入EChart圖表

 

在單元格加入Echarts，首先導入加入echars包

1 //使用npm或cnpm下載echarts
2 cnpm install echarts -D
3 //在src/main.js文件中引入
4 import echarts from 'echarts'
5 Vue.prototype.$echarts = echarts

 其次，在定義表格的列時

 1 {
 2   title: '比例圖',
 3   align: 'center',
 4   render: (h, params) => {
 5     return h('div', [
 6       h('canvas', {
 7         style: {
 8           height: '300px',
 9           margin: '0',
10           padding: '0'
11         },
12         on: {},
13         attrs: {
14           //給單元格設置ID和類型
15           id: params.row.pictureType
16         }
17       })
18     ])
19   }
20 }

 再次，在updated函數中使用echarts進行繪製。此處不在mounted方法裏使用，由於繪製echarts表格是第二次渲染節點

1 updated() {
2   let self = this
3   self.pictureData.forEach((value, index) => {
4     self.paintChart(index, value)
5   })
6 }

 最後在methods中加入方法paintChart

 1 //繪製圖表
 2 paintChart(i, params) {
 3   if (params.pictureType === '柱形圖') {
 4     let chart = this.$echarts.init(document.getElementById(params.pictureType));
 5     　　let option = {
 6         color: ['#3398DB'],
 7         tooltip: {
 8           trigger: 'axis',
 9           axisPointer: {            // 座標軸指示器，座標軸觸發有效
10             type: 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
11           }
12         },
13         grid: {
14           top: '4%',
15           left: '1%',
16           right: '1%',
17           bottom: '1%',
18           containLabel: true
19         },
20         xAxis: [
21           {
22             type: 'category',
23             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
24             axisTick: {
25               alignWithLabel: true
26             }
27           }
28         ],
29         yAxis: [
30           {
31             type: 'value'
32           }
33         ],
34         series: [
35           {
36             name: '直接訪問',
37             type: 'bar',
38             barWidth: '60%',
39             data: [10, 52, 200, 334, 390, 330, 220]
40           }
41         ]
42       };
43       chart.setOption(option)
44     }
45   }
46 }