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