【elementUi】绘制自定义表格、绘制曲线表格

在Element UI中，要绘制一个自定义表格，通常意味着你需要使用el-table组件来创建表格结构，并使用el-table-column来定义表格的列。对于绘制曲线表格，你可以使用Element UI的el-table组件，并结合其他Vue组件或者自定义绘制方法来实现。

以下是一个简单的例子，展示如何使用Element UI的el-table组件来绘制一个自定义表格，并且没有提供绘制曲线的具体实现，因为这取决于具体的需求和数据。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  }
};
</script>

如果你需要绘制曲线表格，比如一个包含图表的表格，你可能需要使用Element UI的el-table结合第三方图表库，如ECharts或Chart.js。以下是一个使用ECharts在el-table中绘制曲线的简单例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="曲线">
      <template slot-scope="scope">
        <div :ref="'chart' + scope.$index" :style="{width: '100%', height: '200px'}"></div>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  data() {
    return {
      tableData: [{
        name: '王小虎',
        data: [120, 200, 150, 80, 70, 110, 130]
      }, {
        name: '李小虎',
        data: [30, 182, 434, 791, 390, 30, 10]
      }]
    };
  },
  mounted() {
    this.tableData.forEach((item, index) => {
      this.$nextTick(() => {
        const chart = echarts.init(this.$refs['chart' + index][0]);
        chart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          y