vue+elementui+echarts多標簽寬度自適應

利用v-if，點擊時進行加載，默認100%寬度。

<！--父組件-->
<el-tabs type="border-card" @tab-click="changeState" value="lineThree">
    <el-tab-pane name="lineThree" label="1">
        <line-chart :chart-data="lineChart3" />
    </el-tab-pane>
    <el-tab-pane name="lineTwo" label="2">
        <line-chart v-if="line2" :chart-data="lineChart2" />
    </el-tab-pane>
    <el-tab-pane name="lineOne" label="3">
        <line-chart v-if="line1" :chart-data="lineChart1" />
    </el-tab-pane>
</el-tabs>

//父組件數據及方法 
  data() {
        return {
            line1: false,
            line2: false
        }
    },
    methods: {
        changeState: function (tab, event) {
            if (tab.name == "lineTwo") {
                this.line2 = true
            } else if (tab.name == "lineOne") {
                this.line1 = true
            }
        }
    }

//lineChart子組件寬度

<div  :style="{width:width}" />

props: {
        width: {
            type: String,
            default: "100%"
        }
}