element-ui 踩坑小计
Posted moon-yyl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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等号后边的值得引号是可有可无的。
而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="width:33%;height:100%;"></div> 4 <div ref="containerFwMem" style="width:33%;height:100%; "></div> 5 <div ref="containerFwNet" style="width: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 width: 100%; 210 display: flex; 211 justify-content: space-around; 212 height: 250px; 213 } 214 </style>
以上是关于element-ui 踩坑小计的主要内容，如果未能解决你的问题，请参考以下文章
vue + element-ui 制作tab切换（切换vue组件，踩坑总结）