生活随笔
收集整理的这篇文章主要介绍了
vue2 自定义card分页
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
在我的脑海，组件化是一切开发的基石，能够复用的，绝不ctrl+v
vue虽然升级到3了，但是很多配套组件没有更新，这里还是巩固一下vue2吧，以后有时间再升级，这里使用的布局完全采用elementui，我并不擅长样式，写那么多css感觉头大，直接服用elementui，对后端工程师来讲就像当初写bootstrap一样，难度降低不少
1 定义组件
遇到Elements in iteration expect to have ‘v-bind:key’ directives.’ 这个错误,
这里v-for key直接使用,因为取值原本就是唯一的
vue中计算属性设计初衷是简单运算，这里用来做动态样式倒是挺好
CSS 颜色
<template><el-card :body-style="{margin:'10px'}" style="margin:5px 5px 0px 0px;"><div slot="header" class=""><span>杜月笙</span></div><el-row><el-col :span="4">男命</el-col><el-col :span="5">年</el-col><el-col :span="5">月</el-col><el-col :span="5">日</el-col><el-col :span="5">时</el-col></el-row><el-row><el-col :span="4">十神</el-col><el-col :span="5">{{info.ygss}}</el-col><el-col :span="5">{{info.mgss}}</el-col><el-col :span="5" :offset="5">{{info.hgss}}</el-col></el-row><el-row><el-col :span="4">天干</el-col><el-col :span="5" :style="skzh(info.dg,info.yg)">{{info.yg}}</el-col><el-col :span="5" :style="skzh(info.dg,info.mg)">{{info.mg}}</el-col><el-col :span="5">{{info.dg}}</el-col><el-col :span="5" :style="skzh(info.dg,info.hg)">{{info.hg}}</el-col></el-row><el-row><el-col :span="4">地支</el-col><el-col :span="5">{{info.yz}}</el-col><el-col :span="5">{{info.mz}}</el-col><el-col :span="5">{{info.dz}}</el-col><el-col :span="5">{{info.hz}}</el-col></el-row><el-row><el-col :span="4">藏干</el-col><el-col :span="5"><span v-for="item in info.yzcg" :key="item" :style="skzh(info.dg,item)">{{item}}</span></el-col><el-col :span="5"><span v-for="item in info.mzcg" :key="item" :style="skzh(info.dg,item)">{{item}}</span></el-col><el-col :span="5"><span v-for="item in info.dzcg" :key="item" :style="skzh(info.dg,item)">{{item}}</span></el-col><el-col :span="5"><span v-for="item in info.hzcg" :key="item" :style="skzh(info.dg,item)">{{item}}</span></el-col></el-row><el-row><el-col :span="4">十神</el-col><el-col :span="5"><span v-for="item in info.yzcgss" :key="item" >{{item}}</span></el-col><el-col :span="5"><span v-for="item in info.mzcgss" :key="item">{{item}}</span></el-col><el-col :span="5"><span v-for="item in info.dzcgss" :key="item">{{item}}</span></el-col><el-col :span="5"><span v-for="item in info.hzcgss" :key="item">{{item}}</span></el-col></el-row><el-row><el-col :span="4">旺衰</el-col><el-col :span="5">{{info.yzcs}}</el-col><el-col :span="5">{{info.mzcs}}</el-col><el-col :span="5">{{info.dzcs}}</el-col><el-col :span="5">{{info.hzcs}}</el-col></el-row><el-row><el-col :span="4">纳音</el-col><el-col :span="5">{{info.yny}}</el-col><el-col :span="5">{{info.mny}}</el-col><el-col :span="5">{{info.dny}}</el-col><el-col :span="5">{{info.hny}}</el-col></el-row></el-card>
</template>
<script>
import {skRelation} from '@/utils/baziUtil'
export default {name: "",data() {return {}},props: {info: Object},created() {},mounted() {},methods: {},computed: {skzh() {return (dg,val) => {let tg = skRelation(dg,val)switch(tg){case '1':// 生return {'color':'Blue'}case '2':// 克return {'color':'Red'}case '3':// 比return {'color':'Cyan'}case '4':// 泄return {'color':'Fuchsia'}case '5':// 耗return {'color':'Brown'}default:break;}}}}
}
</script>
2 组件使用
通过自定义info属性实现父子组件传值，Vue 父子组件传值 props
之前有些问题，vue的双向绑定,tableData是data中变量
<template><div><el-row><el-col :span="6" v-for="(bazi,index) in tableData" :key="index" class="text-center"><bazi-panel :info="bazi"></bazi-panel></el-col></el-row><el-row class="text-right"><el-pagination background layout="prev,pager,next" :total="total" :hide-on-single-page="true"@current-change="handleCurrentChange"></el-pagination></el-row></div>
</template>
<script>
import BaziPanel from '@/components/BaziPanel'
export default {name: "qr-table",components: {BaziPanel},data() {return {tableData:[],total:0,rows:10,page:1}},methods: {findQrList() {this.$store.dispatch("FindQrList", {page:this.page,rows:this.rows}).then(res => {if (res.success){this.tableData = res.data.rowsthis.total = res.data.totalconsole.log(this.baziList)}}).catch(err => {})},handleCurrentChange: function(currentPage){this.page = currentPagethis.findQrList()}},mounted: function(){this.findQrList()}
}
</script>
3 mockjs
yarn add mockjs --dev,添加以来后,上面的数据是写死的，现在通过mockjs来模拟，
VUE项目中使用MOCK
下面的index.js将拦截所有的请求
const Mock
= require('mockjs')
Mock
.setup({timeout
:'200-600'})let configArray
= [];
const files
= require
.context('.', true, /\.js$/);
files
.keys().forEach((key) => {if (key
=== './index.js') return;configArray
= configArray
.concat(files(key
).default
);
});
configArray
.forEach((item) => {for (let [path
, target
] of Object
.entries(item
)) {let protocol
= path
.split('|');Mock
.mock(new RegExp('^' + protocol
[1]), protocol
[0], target
);}
});
这里使用到了mock生成数据的一些语法
import Mock
from 'mockjs'
import {getParams
} from '@/utils/strUtil'let qrList
= Mock
.mock({'rows|100': [{id
:'@guid', 'yg|1':['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'],'yz|1':['子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥'],'mg|1':['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'],'mz|1':['子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥'],'dg|1':['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'],'dz|1':['子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥'],'hg|1':['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'],'hz|1':['子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥'],'ygss|1':['财','才','印','枭','官','杀','食','伤','比','劫'],'mgss|1':['财','才','印','枭','官','杀','食','伤','比','劫'],'hgss|1':['财','才','印','枭','官','杀','食','伤','比','劫'],yzcs
:'病',mzcs
:'胎',dzcs
:'衰',hzcs
:'长生',yny
:'霹雳火',mny
:'古柳木',dny
:'海中金',hny
:'杨柳木',yzcg
:"@shuffle(['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'],1,3)",mzcg
:"@shuffle(['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'],1,3)",dzcg
:"@shuffle(['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'],1,3)",hzcg
:"@shuffle(['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'],1,3)",yzcgss
:"@shuffle(['财','才','印','枭','官','杀','食','伤','比','劫'],1,3)",mzcgss
:"@shuffle(['财','才','印','枭','官','杀','食','伤','比','劫'],1,3)",dzcgss
:"@shuffle(['财','才','印','枭','官','杀','食','伤','比','劫'],1,3)",hzcgss
:"@shuffle(['财','才','印','枭','官','杀','食','伤','比','劫'],1,3)"}]
})export default {'get|find/qiangruo': option => {let params
= getParams(option
.url
)let tableData
= qrList
.rows
.slice((params
.page
-1)*params
.rows
,params
.page
*params
.rows
)return {success
: true,data
: {total
:100,rows
:tableData
}}}
}
从url中获取参数
import Qs
from 'qs'export function getParams(url){let location
= url
.indexOf('?')var params
= {}if (location
!=-1){let params_str
= url
.substr(location
+1)return Qs
.parse(params_str
);}return params
}
总结
以上是生活随笔为你收集整理的vue2 自定义card分页的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
