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

后端项目地址：https://gitee.com/wlovet/table-server

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

一、Render函数之Table加入IVIEW组件与表格修改

render函数可以在表格中除了可以加入html组件还有iview组件，使用方法是在定义列的时候使用元素构造对象h渲染新元素

 render:(h,params)=>{
   return h('div',{
 　　props:{
 　　},
    style:{
    }
   },params.row)
 }

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

 {
   title: '操作',
   key: 'action',
   width: 200,
   render: (h, params) => {
     return h('div', [
       h('Button', {
         props: {
           type: params.row.$isEdit ? 'warning' : 'info',
           size: 'small',
           icon: ''
         },
         style: {
           marginRight: '5px',
         },
         on: {
           click: () => {
             if (params.row.$isEdit) {
               this.handleSave(params.row);
             } else {
               this.handleEdit(params.row);
             }
           }
         }
       },params.row.$isEdit? '保存':'修改'),
       h('Poptip', {
         props: {
           confirm: true,
           title: '是否要删除此字段？',
           transfer: true
         },
         on: {
           'on-ok': () => {
            //删除逻辑
           }
         },
       }, [
         h('Button', {
           props: {
             type: 'error',
             size: 'small'
           },
           style: {
             marginRight: '5px'
           },
         }, '删除')
       ]),
     ])
   }
 }

在methods属性中加入两个方法handleEdit、handleSave

 //点击了修改按钮
 handleEdit(row) {
   this.$set(row, "$isEdit", true);
 },
 //点击了保存按钮
 handleSave(row) {
   this.$set(row, "$isEdit", false);
 }

二、Render函数之Table单元格加入EChart图表

在单元格加入Echarts，首先导入加入echars包

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

其次，在定义表格的列时

 {
   title: '比例图',
   align: 'center',
   render: (h, params) => {
     return h('div', [
       h('canvas', {
         style: {
           height: '300px',
           margin: '0',
           padding: '0'
         },
         on: {},
         attrs: {
           //给单元格设置ID和类型
           id: params.row.pictureType
         }
       })
     ])
   }
 }

再次，在updated函数中使用echarts进行绘制。此处不在mounted方法里使用，因为绘制echarts表格是第二次渲染节点

 updated() {
   let self = this
   self.pictureData.forEach((value, index) => {
     self.paintChart(index, value)
   })
 }

最后在methods中加入方法paintChart

 //绘制图表
 paintChart(i, params) {
   if (params.pictureType === '柱形图') {
     let chart = this.$echarts.init(document.getElementById(params.pictureType));
     　　let option = {
         color: ['#3398DB'],
         tooltip: {
           trigger: 'axis',
           axisPointer: {            // 坐标轴指示器，坐标轴触发有效
             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
           }
         },
         grid: {
           top: '4%',
           left: '1%',
           right: '1%',
           bottom: '1%',
           containLabel: true
         },
         xAxis: [
           {
             type: 'category',
             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
             axisTick: {
               alignWithLabel: true
             }
           }
         ],
         yAxis: [
           {
             type: 'value'
           }
         ],
         series: [
           {
             name: '直接访问',
             type: 'bar',
             barWidth: '60%',
             data: [10, 52, 200, 334, 390, 330, 220]
           }
         ]
       };
       chart.setOption(option)
     }
   }
 }