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