element-ui 踩坑小计

一、el-switch

1.element官方文档 active-value switch 打开时的值  boolean / string / number，我的数值是int,设置如下怎么也绑定不成功

<template slot-scope="{row}">
              <el-switch
                class="switch"
                v-model="row.status" //status是int
                active-text="正常"
                inactive-text="停用"
                active-value=1
                inactive-value=0
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
</template>

　解决办法如下：

　　当value为Number类型的时候active-value和inactive-value前边必须加：单项绑定一下才可以。
　　而active-value和inactive-value等号后边的值得引号是可有可无的。

<template slot-scope="{row}">
    <el-switch
       class="switch"
       v-model="row.status"
       active-text="正常"
       inactive-text="停用"
      :active-value=1
      :inactive-value=0
       active-color="#13ce66"
       inactive-color="#ff4949">
     </el-switch>
</template>

注：借鉴：https://www.jianshu.com/p/852bcd558055

  二、想在el-table表头中添加一个下拉，正常的写法 el-table-column 中添加一个 el-dropdown，来切换上下箭头，

    但问题就是，点击的时候状态变了但是箭头根本不变，弄了半天终于弄成我想要的样子，代码如下

          <el-table-column label ="状态" align="center">
            <!---一个奇怪的问题 在这里添加的 right icon 方向不变 解决办法添加ref 用js追加 --->
            <template slot="header" slot-scope="" >
              <el-dropdown @command="handleCommand" trigger="click" @visible-change="toggleStatus">
              <span>
               状态
              <i ref="iconStatus" class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot='dropdown'>
                <el-dropdown-item command='all' >全部</el-dropdown-item>
                <el-dropdown-item command='1'>正常</el-dropdown-item>
                <el-dropdown-item command='0'>停用</el-dropdown-item>
              </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template slot-scope="{row}">
              <el-switch
                class="switch"
                v-model.number="row.status"
                active-text="正常"
                inactive-text="停用"
                :active-value=1
                :inactive-value=0
                active-color="#13ce66"
                inactive-color="#ccc"
                @change="handleSwitchChange(row)">
              </el-switch>
            </template>
          </el-table-column>

　　

    //状态选择
    handleCommand (command) {
      let params = ""
      if(command !== "all"){
        params = parseInt(command)
      }
      this.getList(params)
    },
    //点击状态
    toggleStatus () {
     this.showDropdownStatus = !this.showDropdownStatus
     this.$refs.iconStatus.className= this.showDropdownStatus ? 'el-icon-arrow-up':'el-icon-arrow-down'+" el-icon--right"   //以这样的方式追加
    },
    //改变状态值
    handleSwitchChange (row) {
      this.stopConsumer = row
      if(row.status === 0){
        this.dialogVisibleStatus = true  //关闭的时候做的操作 这里最好用个 this.$comfirm 后面会说
      }else{
        this.changeStatus()  //开通
      }
    },

　　

最终效果，一进去的时候箭头向下，点击状态，箭头向上，显示数据，在空白处或者其他处点击，数据收回，箭头向下。

 

三 . el-tabs切换

　　1.如果切换下面是两个组件，请一定写上，name,并在data中设置默认值，如果不写的话所有的组件都会一同挂载，影响效率，

        而且这种情况下如果有一个组件写了依赖dom的定时器，就会报错。

<el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="系统监控" name="systemMonitor">
              <vm-detail-system-monitor v-if="'systemMonitor' === activeName"></vm-detail-system-monitor>
          </el-tab-pane>
          <el-tab-pane label="系统配置" name="systemConfigure">
            <keep-alive>
              <el-row>
                <el-row  style="margin-bottom:10px;">VCPE L2TP</el-row>
                <vm-detail-system-l2tp></vm-detail-system-l2tp>
                <el-row style="margin-top:20px;">   
                  <vm-detail-system-configure :netData="detailNetConfigData"></vm-detail-system-configure>
                </el-row>
              </el-row>
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </el-row>

 data () {
    return {
      activeName: 'systemMonitor'
     }
  }

四. echarts 饼图，

     这里需要注意的是，window监听resize 经常会有问题，比如 大小变化的时候，会突然一瞬间的卡顿，图出不来，

销毁的时候需要注意把监听的函数销毁掉

<template>
  <div class="system-model-info">
    <div ref="containerFwCpu" style="33%;height:100%;"></div>
    <div ref="containerFwMem" style="33%;height:100%; "></div>
    <div ref="containerFwNet" style="33%;height:100%; "></div>
  </div>
</template>

<script>
import echarts from "echarts"
export default {
  name: '',
  components: {},
  data () {
    return {
      timesetInterval: '',
      CpuData: 11,
      Memdata: 40,
      Netdata: 30,
      optionColor: [["#01da8b", "#1b1661"], ["#fff916", "#1b1661"], ["#ff6b60", "#1b1661"]],
      containerFwCpu: null,
      containerFwMem: null,
      containerFwNet: null,
      optionCpu: {},
      optionMem: {},
      optionNet: {},
      listenerResize: () => { this.resize() }
    }
  },
  created () {
    console.log("system-monitor")
  },
  mounted () {
    console.log("mounted")
    this.$nextTick(() => {
      this.initCpuChart()
      this.initMemChart()
      this.initNetChart()
      window.addEventListener("resize", this.listenerResize)
      this.timesetInterval = setInterval(this.Updatedata, 3000)
      
    })
  },
  beforeDestroy () {
    console.log("beforeDestroybeforeDestroybeforeDestroy")
    clearInterval(this.timesetInterval)
    window.removeEventListener("resize", this.listenerResize) 
    if (this.containerFwCpu !== null) {
      this.containerFwCpu.dispose()
      this.containerFwCpu = null
    }
    if (this.containerFwMem !== null) {
      this.containerFwMem.dispose()
      this.containerFwMem = null
    }
    if (this.containerFwNet !== null) {
      this.containerFwNet.dispose()
      this.containerFwNet = null
    }
    
    
  },
  methods: {
    myResize () {
      console.log("remove")
    },
    initCpuChart () {
      this.containerFwCpu = echarts.init(this.$refs.containerFwCpu)
      this.optionCpu = {
        title: {
          text: 'CPU负载',
          x: 'center',
          y: 'bottom',
          textStyle: { color: '#000', fontWeight: 'normal', fontSize: '14' }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {d}%"
        },
        color: ["#01da8b", "#1b1661"],
        series: [
          {
            name: 'CPU',
            type: 'pie',
            radius: ['55%', '70%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: { show: true, position: 'center', formatter: function (param) { if (param.dataIndex == 0) { return param.value + '%' } else { return '' } }, textStyle: { fontSize: '25', fontWeight: 'normal' } },
              emphasis: { show: false }
            },
            labelLine: { normal: { show: false } },
            data: [
              { value: 45, name: '占用' },
              { value: 55, name: '空闲' }
            ]
          }
        ]
      }
      this.containerFwCpu.setOption(this.optionCpu)
    },
    initMemChart () {
      this.containerFwMem = echarts.init(this.$refs.containerFwMem)
      this.optionMem = {
        title: {
          text: '内存占用率',
          x: 'center',
          y: 'bottom',
          textStyle: { color: '#000', fontWeight: 'normal', fontSize: '14' }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {d}%"
        },
        color: ["#01da8b", "#1b1661"],
        series: [
          {
            name: 'CPU',
            type: 'pie',
            radius: ['55%', '70%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: { show: true, position: 'center', formatter: function (param) { if (param.dataIndex == 0) { return param.value + '%' } else { return '' } }, textStyle: { fontSize: '25', fontWeight: 'normal' } },
              emphasis: { show: false }
            },
            labelLine: { normal: { show: false } },
            data: [
              { value: 56, name: '占用' },
              { value: 34, name: '空闲' }
            ]
          }
        ]
      }
      this.containerFwMem.setOption(this.optionMem)
    },
    initNetChart () {
      this.containerFwNet = echarts.init(this.$refs.containerFwNet)
      this.optionNet = {
        title: {
          text: '磁盘空间',
          x: 'center',
          y: 'bottom',
          textStyle: { color: '#000', fontWeight: 'normal', fontSize: '14' }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {d}%"
        },
        color: ["#01da8b", "#1b1661"],
        series: [
          {
            name: 'CPU',
            type: 'pie',
            radius: ['55%', '70%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: { show: true, position: 'center', formatter: function (param) { if (param.dataIndex == 0) { return param.value + '%' } else { return '' } }, textStyle: { fontSize: '25', fontWeight: 'normal' } },
              emphasis: { show: false }
            },
            labelLine: { normal: { show: false } },
            data: [
              { value: 45, name: '占用' },
              { value: 55, name: '空闲' }
            ]
          }
        ],
      }
      this.containerFwNet.setOption(this.optionNet)
    },
    Updatedata () {
      console.log("update")
      this.CpuData = Math.floor(Math.random() * (30))
      this.optionCpu.series[0].data = [{ value: this.CpuData, name: '占用' }, { value: (100 - this.CpuData), name: '空闲' }]
      this.CpuData > 40 ? this.optionCpu.color = (this.CpuData > 60 ? this.optionCpu.color = this.optionColor[2] : this.optionCpu.color = this.optionColor[1]) : this.optionCpu.color = this.optionColor[0]
      this.containerFwCpu.setOption(this.optionCpu)


      this.Memdata = Math.floor(Math.random() * (50))
      this.optionMem.series[0].data = [{ value: this.Memdata, name: '占用' }, { value: (100 - this.Memdata), name: '空闲' }]
      this.Memdata > 40 ? this.optionMem.color = (this.Memdata > 60 ? this.optionMem.color = this.optionColor[2] : this.optionMem.color = this.optionColor[1]) : this.optionMem.color = this.optionColor[0]
      this.containerFwMem.setOption(this.optionMem)

      this.optionNet.series[0].data = [{ value: 30, name: '占用' }, { value: (100 - 30), name: '空闲' }]
      this.Netdata > 40 ? this.optionNet.color = (this.Netdata > 60 ? this.optionNet.color = this.optionColor[2] : this.optionNet.color = this.optionColor[1]) : this.optionNet.color = this.optionColor[0]
      this.containerFwNet.setOption(this.optionNet)
    },
    resize () {
      console.log("resize")
        if(this.containerFwCpu !== null){
          this.containerFwCpu.resize()
        }
        if(this.containerFwMem !== null) {
          this.containerFwMem.resize()
        }
        if(this.containerFwNet !== null) {
          this.containerFwNet.resize()
        }
        
        
    }
  }

}
</script>
<style lang="scss" scoped>
.system-model-info {
   100%;
  display: flex;
  justify-content: space-around;
  height: 250px;
}
</style>