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的定时器，就会报错。

 1 <el-tabs type="border-card" v-model="activeName">
 2           <el-tab-pane label="系统监控" name="systemMonitor">
 3               <vm-detail-system-monitor v-if="'systemMonitor' === activeName"></vm-detail-system-monitor>
 4           </el-tab-pane>
 5           <el-tab-pane label="系统配置" name="systemConfigure">
 6             <keep-alive>
 7               <el-row>
 8                 <el-row  style="margin-bottom:10px;">VCPE L2TP</el-row>
 9                 <vm-detail-system-l2tp></vm-detail-system-l2tp>
10                 <el-row style="margin-top:20px;">   
11                   <vm-detail-system-configure :netData="detailNetConfigData"></vm-detail-system-configure>
12                 </el-row>
13               </el-row>
14             </keep-alive>
15           </el-tab-pane>
16         </el-tabs>
17       </el-row>

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

四. echarts 饼图，

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

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

  1 <template>
  2   <div class="system-model-info">
  3     <div ref="containerFwCpu" style="33%;height:100%;"></div>
  4     <div ref="containerFwMem" style="33%;height:100%; "></div>
  5     <div ref="containerFwNet" style="33%;height:100%; "></div>
  6   </div>
  7 </template>
  8 
  9 <script>
 10 import echarts from "echarts"
 11 export default {
 12   name: '',
 13   components: {},
 14   data () {
 15     return {
 16       timesetInterval: '',
 17       CpuData: 11,
 18       Memdata: 40,
 19       Netdata: 30,
 20       optionColor: [["#01da8b", "#1b1661"], ["#fff916", "#1b1661"], ["#ff6b60", "#1b1661"]],
 21       containerFwCpu: null,
 22       containerFwMem: null,
 23       containerFwNet: null,
 24       optionCpu: {},
 25       optionMem: {},
 26       optionNet: {},
 27       listenerResize: () => { this.resize() }
 28     }
 29   },
 30   created () {
 31     console.log("system-monitor")
 32   },
 33   mounted () {
 34     console.log("mounted")
 35     this.$nextTick(() => {
 36       this.initCpuChart()
 37       this.initMemChart()
 38       this.initNetChart()
 39       window.addEventListener("resize", this.listenerResize)
 40       this.timesetInterval = setInterval(this.Updatedata, 3000)
 41       
 42     })
 43   },
 44   beforeDestroy () {
 45     console.log("beforeDestroybeforeDestroybeforeDestroy")
 46     clearInterval(this.timesetInterval)
 47     window.removeEventListener("resize", this.listenerResize) 
 48     if (this.containerFwCpu !== null) {
 49       this.containerFwCpu.dispose()
 50       this.containerFwCpu = null
 51     }
 52     if (this.containerFwMem !== null) {
 53       this.containerFwMem.dispose()
 54       this.containerFwMem = null
 55     }
 56     if (this.containerFwNet !== null) {
 57       this.containerFwNet.dispose()
 58       this.containerFwNet = null
 59     }
 60     
 61     
 62   },
 63   methods: {
 64     myResize () {
 65       console.log("remove")
 66     },
 67     initCpuChart () {
 68       this.containerFwCpu = echarts.init(this.$refs.containerFwCpu)
 69       this.optionCpu = {
 70         title: {
 71           text: 'CPU负载',
 72           x: 'center',
 73           y: 'bottom',
 74           textStyle: { color: '#000', fontWeight: 'normal', fontSize: '14' }
 75         },
 76         tooltip: {
 77           trigger: 'item',
 78           formatter: "{b}: {d}%"
 79         },
 80         color: ["#01da8b", "#1b1661"],
 81         series: [
 82           {
 83             name: 'CPU',
 84             type: 'pie',
 85             radius: ['55%', '70%'],
 86             center: ['50%', '45%'],
 87             avoidLabelOverlap: false,
 88             label: {
 89               normal: { show: true, position: 'center', formatter: function (param) { if (param.dataIndex == 0) { return param.value + '%' } else { return '' } }, textStyle: { fontSize: '25', fontWeight: 'normal' } },
 90               emphasis: { show: false }
 91             },
 92             labelLine: { normal: { show: false } },
 93             data: [
 94               { value: 45, name: '占用' },
 95               { value: 55, name: '空闲' }
 96             ]
 97           }
 98         ]
 99       }
100       this.containerFwCpu.setOption(this.optionCpu)
101     },
102     initMemChart () {
103       this.containerFwMem = echarts.init(this.$refs.containerFwMem)
104       this.optionMem = {
105         title: {
106           text: '内存占用率',
107           x: 'center',
108           y: 'bottom',
109           textStyle: { color: '#000', fontWeight: 'normal', fontSize: '14' }
110         },
111         tooltip: {
112           trigger: 'item',
113           formatter: "{b}: {d}%"
114         },
115         color: ["#01da8b", "#1b1661"],
116         series: [
117           {
118             name: 'CPU',
119             type: 'pie',
120             radius: ['55%', '70%'],
121             center: ['50%', '45%'],
122             avoidLabelOverlap: false,
123             label: {
124               normal: { show: true, position: 'center', formatter: function (param) { if (param.dataIndex == 0) { return param.value + '%' } else { return '' } }, textStyle: { fontSize: '25', fontWeight: 'normal' } },
125               emphasis: { show: false }
126             },
127             labelLine: { normal: { show: false } },
128             data: [
129               { value: 56, name: '占用' },
130               { value: 34, name: '空闲' }
131             ]
132           }
133         ]
134       }
135       this.containerFwMem.setOption(this.optionMem)
136     },
137     initNetChart () {
138       this.containerFwNet = echarts.init(this.$refs.containerFwNet)
139       this.optionNet = {
140         title: {
141           text: '磁盘空间',
142           x: 'center',
143           y: 'bottom',
144           textStyle: { color: '#000', fontWeight: 'normal', fontSize: '14' }
145         },
146         tooltip: {
147           trigger: 'item',
148           formatter: "{b}: {d}%"
149         },
150         color: ["#01da8b", "#1b1661"],
151         series: [
152           {
153             name: 'CPU',
154             type: 'pie',
155             radius: ['55%', '70%'],
156             center: ['50%', '45%'],
157             avoidLabelOverlap: false,
158             label: {
159               normal: { show: true, position: 'center', formatter: function (param) { if (param.dataIndex == 0) { return param.value + '%' } else { return '' } }, textStyle: { fontSize: '25', fontWeight: 'normal' } },
160               emphasis: { show: false }
161             },
162             labelLine: { normal: { show: false } },
163             data: [
164               { value: 45, name: '占用' },
165               { value: 55, name: '空闲' }
166             ]
167           }
168         ],
169       }
170       this.containerFwNet.setOption(this.optionNet)
171     },
172     Updatedata () {
173       console.log("update")
174       this.CpuData = Math.floor(Math.random() * (30))
175       this.optionCpu.series[0].data = [{ value: this.CpuData, name: '占用' }, { value: (100 - this.CpuData), name: '空闲' }]
176       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]
177       this.containerFwCpu.setOption(this.optionCpu)
178 
179 
180       this.Memdata = Math.floor(Math.random() * (50))
181       this.optionMem.series[0].data = [{ value: this.Memdata, name: '占用' }, { value: (100 - this.Memdata), name: '空闲' }]
182       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]
183       this.containerFwMem.setOption(this.optionMem)
184 
185       this.optionNet.series[0].data = [{ value: 30, name: '占用' }, { value: (100 - 30), name: '空闲' }]
186       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]
187       this.containerFwNet.setOption(this.optionNet)
188     },
189     resize () {
190       console.log("resize")
191         if(this.containerFwCpu !== null){
192           this.containerFwCpu.resize()
193         }
194         if(this.containerFwMem !== null) {
195           this.containerFwMem.resize()
196         }
197         if(this.containerFwNet !== null) {
198           this.containerFwNet.resize()
199         }
200         
201         
202     }
203   }
204 
205 }
206 </script>
207 <style lang="scss" scoped>
208 .system-model-info {
209    100%;
210   display: flex;
211   justify-content: space-around;
212   height: 250px;
213 }
214 </style>

View Code