溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目框架
Element-ui+Vue+jQuery+Bootstrap+Echarts。
嵌入vue使用的是<script>，沒有使用vue-cli，請自行將<template>內代碼貼入html，<style>內代碼貼入樣式表。
checkbox全選和全不選
<template>
<el-form-item label="地電阻率選項:">
<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單項
searchItem: {
eid: [],
},
// checkbox數據循環
eidList: [{
name: '缺數',
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: {
// 監聽checkbox是否全部選擇
"searchItem.eid": function() {
if (this.searchItem.eid.length == this.eidList.length) {
this.eidAll = true
} else {
this.eidAll = false
}
}
}
});
</script>
表頭固定，表身滾動
方案①：el-table，卡死，據說和vue版本有關系，但是升級了仍然卡死，拋棄。
方案②：table，要設置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數據循環
tableHeadList: [{
// 根據type來v-if th的標題內容，根據需求放文本或checkbox
type: 'text',
// 每格占用柵格，element-ui總柵格數是24
col: '1',
// th標題
text: 'ID'
}],
// td數據循環
tableBodyList: [{
type: 'text',
col: '1',
// 接口返回字段
field: 'id'
}],
// 表格數據
tableData: [...]
}
});
</script>
表格滾動無限加載
可以用插件，但為了輕量就自己寫吧，此處用jQuery。
<script>
var app = new Vue({
el: '#app',
mounted: function() {
// 監聽滾動
this.handleScrollLoad();
},
data: {
// 加載完全部數據，更換查詢條件時請先初始化為false
loadAll: false,
// 頁碼，更換查詢條件時請先初始化為1
offset: 1,
// 表格數據，更換查詢條件時請先清空
tableData: []
},
methods: {
// 處理滾動加載
handleScrollLoad() {
var $this = this
var nScrollHight = 0;
var nScrollTop = 0;
var nDivHight = $(".table .tbody").height();
$(".table .tbody").scroll(function() {
if ($this.loadAll) {
// 全部加載完不進行操作
return;
}
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
if (nScrollTop + nDivHight >= nScrollHight) {
// 滑到底部，offset遞增
// 因為我們后端定義的offset其實是page，代表第幾頁，而不是真正意義上的offset
// 有需要的人可以轉為$this.offset += $this.limit;
$this.offset += 1;
$this.searchData()
}
});
},
// 查詢表格數據
searchData() {
...
var $this = this
axios.get(str)
.then(res => {
if (res.status === 200) {
// 請求正常，判斷是否加載完全部
if (res.data.rows.length === 0) {
$this.loadAll = true;
return;
}
for (let i of res.data.rows) {
$this.tableData.push(i);
}
} else {
// 請求錯誤
alert('請求錯誤，錯誤碼：' + res.status);
}
}, e => {
this.loading = false;
throw new Error('請求失敗：' + e);
})
}
}
});
</script>
多個echarts
既然使用了vue，嵌入echarts最好的方式當然是組件，將echarts封裝成組件，再通過v-for循環，每次數據更新再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: {
// 曲線數據
echartsData: []
}
});
/*****************************曲線實例****************************/
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>
后記
使用這個框架做項目斷斷續續也做了很久了，一直都沒有特意去總結，導致每次都要翻從前的代碼，回憶良久，例如el-checkbox，不同于其他表單項，它的label才是真正的value，每次都要重新查閱文檔+回憶，其實是很費時的。
總結項目套路是很有必要的，我覺得隨著工作時間增長，一個人是進步，還是重復工作，和會不會總結有本質聯系。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
