vue组件清单回顾
一、循环组件
循环的div块,其他组件也可以
<div v-for="o in dbData" :key="o">
</div>
二、jS遍历数组重新组值两种方法
1、
for (let i = 0; i < res.length; i++) {
const percentage = (res[i].next_value / res[i].max_value) * 100
res[i].name = parseInt(percentage)
cDate.push(new Date(res[i].create_time))
}
2、data是数组,重新组值
success: function(data) {
var tableData = []
let obj = {}
// 重新构建新的
for (const key in data) {
++this.rowNum
obj = data[key]
obj.row = this.rowNum
obj.ip = key
obj.desk_use = parseInt(toPointNoBest(data[key].disk_Used_rate))
obj.mem_use = parseInt(toPointNoBest(data[key].rate_mem))
obj.cpu_use = parseInt(toPointNoBest(data[key].sys_cpu_rate))
var ipimg = sulast(key)
// 服务器图片
obj.imgurl = this.serverImgBck(ipimg)
tableData.push(obj)
}
this.tableData = tableData
},
三、vue使用图片控件进度条
<img :src="item.imgurl" class="one-img"/>
serverImgBck(ipimg) {
if (parseInt(ipimg) < 75) {
return require('../../../../assets/img/server/servera.jpg')
} else if (parseInt(ipimg) <= 100) {
return require('../../../../assets/img/server/serverb.jpg')
} else if (parseInt(ipimg) <= 200) {
return require('../../../../assets/img/server/serverc.jpg')
}
},
四、对于这样实现注意几点样式问题
1、左右对齐,使用:align=“center” 和 text-align: center;
2、上下对齐,使用高度
3、每一块之间宽度使用百分比
4、不换行:display: inline-block;
5、margin-top: 15px; 和 padding-top: 6px; 区别
五、vuex传值控制弹框
1、编写弹窗页面:ExchangeJudge1.vue
<template>
</template>
<script>
// 监听属性 类似于data概念
computed: {
isExchangeJudge1: function () {
return this.$store.state.isExchangeJudge1
},
},
methods: {
handleCancel: function () {
this.$store.commit('ispopupExchange1', { isExchangeJudge1: false });
}
}
</script>
2、编写仓库js:store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 定义默认为false
const isPopupCardNum2 = false
const state = {
isPopupCardNum2: JSON.parse(isPopupCardNum2)
}
const mutations = {
ispopupCNum2: function (state, isPopupCardNum2) {
state.isPopupCardNum2 = isPopupCardNum2.isPopupCardNum2
}
}
// 注册参数
export default new Vuex.Store({
state,
mutations
})
六、徒手写table表格
<section class="content-detail">
<div id="table_wrap" >
<table class="table" width="800" cellspacing="0" cellpadding="0">
<thead class="table_head">
<tr>
<th>兑换日期</th>
<th>兑换内容</th>
<th>消耗内容</th>
</tr>
</thead>
<tbody class="table_tbody">
<tr v-for="his in list" class="tabContent">
<td v-text="his.arriveTime"></td>
<td v-text="his.exchangeName"></td>
<td v-text="his.moonCakeData"></td>
</tr>
</tbody>
</table>
</div>
</section>
.content-detail {
text-align: center;
#table_wrap > table {
color: #eac56b;
margin: 8rem auto;
width: 80%;
font-size: 10px;
border-collapse: separate;
border-spacing: 0;
border: 1px #000;
}
.table tbody{
// 表格高度
height: 16.8rem;
overflow-y: auto;
}
.table thead, .table tbody {
display: block;
}
.table thead{
display: block;
color: #ECE0BD;
}
.table th{
width: 400px;
}
.table td{
width: 150px;
}
table thead tr,table tbody tr {
height: 30px;
line-height: 18px;
/*background-color: pink;*/
}
table tr th:first-child,table tr td:first-child {/*设置table左边边框*/
border-left: 1px solid #60528C;
}
table tr th:last-child,table tr td:last-child {/*设置table右边边框*/
border-right: 1px solid #60528C;
}
table tr td:first-child,
table tr td:nth-child(2),
table tr td:nth-child(3),
table tr td:last-child{/*设置table表格每列底部边框*/
border-bottom: 1px solid #60528C;
}
/*设置table表格最后一列底部边框*/
table tr:last-child td:first-child,
table tr:last-child td:nth-child(2),
table tr:last-child td:nth-child(3),
table tr:last-child td:last-child{
border-bottom: 2px solid #60528C;
}
table tr th {
background: #202671;
}
table tr:first-child th:first-child {
border-top-left-radius: 12px;
}
table tr:first-child th:last-child {
border-top-right-radius: 12px;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 12px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 12px;
}
}
效果图
七、element栅栏五等分
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
</el-col>
.el-col-lg-4-8 {
width: 20%;
}
八、Js动态控制css样式
页面
<div class="el-card__body" v-bind:class="isActive?'colorFall':'colorRise'">
</div>
样式
.colorRise {
color: green;
}
.colorFall {
color: red;
}
js
data () {
return {
isActive: true
}
},
// 我这里是页面加载时候的事件
mounted () {
let _this = this
if (_this.riseFallNum < 0) {
_this.isActive = false
}
},
九、click点击事件作用在自定义组件上无效果
需要加上.native
@click.native="handleClick(value.id)"