在我的腦海，組件化是一切開發的基石，能夠復用的，絕不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')// 設置攔截ajax請求的相應時間 Mock.setup({timeout:'200-600'})let configArray = [];// 使用webpack的require.context()遍歷所有mock文件 const files = require.context('.', true, /\.js$/); files.keys().forEach((key) => {if (key === './index.js') return;configArray = configArray.concat(files(key).default); });// 注冊所有的mock服務 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){// 從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分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。