• 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}" />
    props: {
             {
                type: String,
                default: "100%"
            }
    }
  • 相关阅读:
    多行文字垂直居中效果(利用flex)
    Switch
    Scanner
    Method
    Recursion递归
    for
    if
    dowhile
    while
    DataType 数据类型
  • 原文地址:https://www.cnblogs.com/changlun/p/11764821.html
Copyright © 2020-2023  润新知