vue 使用 Table 展开行功能和 曲线图

    <div class="box box-info" style="border-top-color:white;">
        <template>
          <el-table
            :data="table_data"
            @expand-change="expandChange"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <div :id="'main' + props.row.place_id" :style="{width: '100rem', height: '20rem'}"></div>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              label="品名"
              width="120"
              prop="place_name">
            </el-table-column>
            <el-table-column
                width="75"
                label="D1"
                prop="days.D1">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,1,scope.row.days.D1)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D1" name="">
                </template>
            </el-table-column>
            <el-table-column
                width="75"
                label="D2"
                prop="days.D2">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,2,scope.row.days.D2)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D2" name="">
                </template>
            </el-table-column>
            <el-table-column
                width="75"
                label="D3"
                prop="days.D3">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,3,scope.row.days.D3)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D3" name="">
                </template>
            </el-table-column>
            <el-table-column
                width="75"
                label="D4"
                prop="days.D4">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,4,scope.row.days.D4)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D4" name="">
                </template>
            </el-table-column>
            <el-table-column
                width="75"
                label="D5"
                prop="days.D5">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,5,scope.row.days.D5)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D5" name="">
                </template>
            </el-table-column>
            <el-table-column
                label="D6"
                width="75"
                prop="days.D6">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,6,scope.row.days.D6)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D6" name="">
                </template>
            </el-table-column>
            <el-table-column
                width="75"
                label="D7"
                prop="days.D7">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,7,scope.row.days.D7)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D7" name="">
                </template>
            </el-table-column>
            <el-table-column
                width="75"
                label="D8"
                prop="days.D8">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,8,scope.row.days.D8)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D8" name="">
                </template>
            </el-table-column>
            <el-table-column
                width="75"
                label="D9"
                prop="days.D9">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,9,scope.row.days.D9)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D9" name="">
                </template>
            </el-table-column>
            <el-table-column
                width="75"
                label="D10"
                prop="days.D10">
                <template slot-scope="scope">
                    <input readonly style="width: 3rem;border:none;" @change="roadEC(scope.row,10,scope.row.days.D10)" oninput="if(value<0)value=1;if(value>100)value=100;if(value=='')value=1;" type="text" v-model="scope.row.days.D10" name="">
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                width="100">
                <template slot-scope="scope">
                    <el-button slot="reference" type="success" @click="addPlace(scope.row)" size="mini">编辑</el-button>
                </template>
            </el-table-column>
          </el-table>
        </template>
    </div>

Vue

   /*
    * 修改效率值改变曲线 限制输入类型长度 这边改  less保留几位
    **/
    roadEC(row,index,num,less)
    {
        var that = this
        // 判断是不是整数
        var re = /^[0-9]+\.?[0-9]*$/;
        var i = "D" + index
        if(!re.test(num)){
            row.days[i] = 1.0
        }

        // 如果小数点超过1位只保留一位
        if (num.indexOf(".") != -1) {
            num = num.substring(0,(num.indexOf(".") + less))
            row.days[i] = num
        }

        if (row.load == true) {
            that.$nextTick(()=>{
                that.thisEcharts(row)
            })
        }
    },
 /*
     * 点击展开曲线图
     **/
     expandChange(item){
         var that = this
         if (item.load == false) {
             that.$nextTick(()=>{
                 that.thisEcharts(item)
             })
             item.load = true
         }else{
             item.load = false
         }
     },
     /*
     * 曲线图
     **/
     thisEcharts(table_data){
         var that = this
         var chartDom = document.getElementById('main' + table_data.place_id);
         var myChart = echarts.init(chartDom);
         var list_name = [];
         var list_point = [];

         for(var i in table_data.days)
         {
             list_name.push(i)
             list_point.push(table_data.days[i])
         }
         var option = {
             xAxis: {
                 type: 'category',
                 data: list_name
             },
             yAxis: {
                 type: 'value'
             },
             series: [{
                 data: list_point,
                 type: 'line',
                 smooth: true
             }]
         };
         option && myChart.setOption(option);
     },