您好,登錄后才能下訂單哦!
項(xiàng)目框架
Element-ui+Vue+jQuery+Bootstrap+Echarts。
嵌入vue使用的是<script>,沒有使用vue-cli,請(qǐng)自行將<template>內(nèi)代碼貼入html,<style>內(nèi)代碼貼入樣式表。
checkbox全選和全不選
<template> <el-form-item label="地電阻率選項(xiàng):"> <el-checkbox class="search_item" v-model="eidAll" @change="handleEidAllChange">全選</el-checkbox> <el-checkbox-group v-model="searchItem.eid"> <el-checkbox class="search_item" v-for="item of eidList" :label="item.value">{{ item.name }}</el-checkbox> </el-checkbox-group> </el-form-item> </template> <script> var app = new Vue({ el: '#app', data: { // 全選變量 eidAll: false // checkbox單項(xiàng) searchItem: { eid: [], }, // checkbox數(shù)據(jù)循環(huán) eidList: [{ name: '缺數(shù)', value: 'DZ1' // ... }] }, methods: { // 處理全選 handleEidAllChange() { if (this.eidAll) { this.searchItem.eid = []; var arr = []; for (let i in this.eidList) { arr.push(this.eidList[i].value); } this.searchItem.eid = arr; } else { this.searchItem.eid = []; } }, }, watch: { // 監(jiān)聽checkbox是否全部選擇 "searchItem.eid": function() { if (this.searchItem.eid.length == this.eidList.length) { this.eidAll = true } else { this.eidAll = false } } } }); </script>
表頭固定,表身滾動(dòng)
方案①:el-table,卡死,據(jù)說和vue版本有關(guān)系,但是升級(jí)了仍然卡死,拋棄。
方案②:table,要設(shè)置display:table; table-layout: fixed;,布局有局限性。
方案③:div+el-col模擬table。
<template> <div class="table"> <div class="thead"> <div class="tr"> <el-row> <el-col v-for="item of tableHeadList" :span="item.col"> <div class="th"> {{ item.text }} </div> </el-col> </el-row> </div> </div> <div class="tbody"> <div class="tr" v-for="(item, index) of tableData"> <el-row> <el-col v-for="bodyItem of tableBodyList" :span="bodyItem.col"> <div class="td"> {{ item[bodyItem.field] }} </div> </el-col> </el-row> </div> </div> </div> </template> <style> .table .tbody { width: 100%; height: 278px; overflow-y: scroll; } </style> <script> var app = new Vue({ el: '#app', data: { // th數(shù)據(jù)循環(huán) tableHeadList: [{ // 根據(jù)type來v-if th的標(biāo)題內(nèi)容,根據(jù)需求放文本或checkbox type: 'text', // 每格占用柵格,element-ui總柵格數(shù)是24 col: '1', // th標(biāo)題 text: 'ID' }], // td數(shù)據(jù)循環(huán) tableBodyList: [{ type: 'text', col: '1', // 接口返回字段 field: 'id' }], // 表格數(shù)據(jù) tableData: [...] } }); </script>
表格滾動(dòng)無限加載
可以用插件,但為了輕量就自己寫吧,此處用jQuery。
<script> var app = new Vue({ el: '#app', mounted: function() { // 監(jiān)聽滾動(dòng) this.handleScrollLoad(); }, data: { // 加載完全部數(shù)據(jù),更換查詢條件時(shí)請(qǐng)先初始化為false loadAll: false, // 頁碼,更換查詢條件時(shí)請(qǐng)先初始化為1 offset: 1, // 表格數(shù)據(jù),更換查詢條件時(shí)請(qǐng)先清空 tableData: [] }, methods: { // 處理滾動(dòng)加載 handleScrollLoad() { var $this = this var nScrollHight = 0; var nScrollTop = 0; var nDivHight = $(".table .tbody").height(); $(".table .tbody").scroll(function() { if ($this.loadAll) { // 全部加載完不進(jìn)行操作 return; } nScrollHight = $(this)[0].scrollHeight; nScrollTop = $(this)[0].scrollTop; if (nScrollTop + nDivHight >= nScrollHight) { // 滑到底部,offset遞增 // 因?yàn)槲覀兒蠖硕x的offset其實(shí)是page,代表第幾頁,而不是真正意義上的offset // 有需要的人可以轉(zhuǎn)為$this.offset += $this.limit; $this.offset += 1; $this.searchData() } }); }, // 查詢表格數(shù)據(jù) searchData() { ... var $this = this axios.get(str) .then(res => { if (res.status === 200) { // 請(qǐng)求正常,判斷是否加載完全部 if (res.data.rows.length === 0) { $this.loadAll = true; return; } for (let i of res.data.rows) { $this.tableData.push(i); } } else { // 請(qǐng)求錯(cuò)誤 alert('請(qǐng)求錯(cuò)誤,錯(cuò)誤碼:' + res.status); } }, e => { this.loading = false; throw new Error('請(qǐng)求失?。? + e); }) } } }); </script>
多個(gè)echarts
既然使用了vue,嵌入echarts最好的方式當(dāng)然是組件,將echarts封裝成組件,再通過v-for循環(huán),每次數(shù)據(jù)更新再setOption。
<template> <div class="echarts_box"> <charts v-for="(item, index) of echartsData" :item="item"></charts> </div> </template> <script> var app = new Vue({ el: '#app', data: { // 曲線數(shù)據(jù) echartsData: [] } }); /*****************************曲線實(shí)例****************************/ Vue.component('charts', { props: { item: Object }, methods: { // 初始化曲線 initChart() { this['echart' + (this.item.id)] = echarts.init(document.getElementById('echart' + this.item.id)); this.setChart(); }, setChart() { var $this = this let option = { ... }; this['echart' + this.item.id].setOption(option); } }, mounted() { this.initChart(); }, watch: { item: { handler: function () { this.setChart(); }, deep: true } }, template: `<div class="echart_item" :id="'echart'+item.id" ></div>` }); </script>
后記
使用這個(gè)框架做項(xiàng)目斷斷續(xù)續(xù)也做了很久了,一直都沒有特意去總結(jié),導(dǎo)致每次都要翻從前的代碼,回憶良久,例如el-checkbox,不同于其他表單項(xiàng),它的label才是真正的value,每次都要重新查閱文檔+回憶,其實(shí)是很費(fèi)時(shí)的。
總結(jié)項(xiàng)目套路是很有必要的,我覺得隨著工作時(shí)間增長,一個(gè)人是進(jìn)步,還是重復(fù)工作,和會(huì)不會(huì)總結(jié)有本質(zhì)聯(lián)系。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。