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%"
        }
}