iView组件中Table单元格支持可编辑、加入各种图表

大家好呀，我是 summo。最近我找到了几年前我还是全栈开发工程师时留下的学习 Demo 和文章。重读这些代码和文字，仿佛唤醒了我对过去的记忆。当时的自己可能没有想到会一直坚持写文章到现在，但回顾这段经历，感触良多。每一步的努力和坚持都让我成为了今天的自己，也希望这些文章能继续帮助更多人。
后端项目地址：gitee.com/wlovet/tabl...

前端项目地址：gitee.com/wlovet/tabl...

一、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 = echarts1 //使用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)
  }
}
}