项目框架
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" style="height:260px;"></div>`
});
</script>
后记
使用这个框架做项目断断续续也做了很久了，一直都没有特意去总结，导致每次都要翻从前的代码，回忆良久，例如el-checkbox，不同于其他表单项，它的label才是真正的value，每次都要重新查阅文档+回忆，其实是很费时的。
总结项目套路是很有必要的，我觉得随着工作时间增长，一个人是进步，还是重复工作，和会不会总结有本质联系。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。