JavaScript

超轻量级php框架startmvc

Element-UI+Vue模式使用总结

更新时间:2020-09-28 15:24:03 作者:startmvc
项目框架Element-ui+Vue+jQuery+Bootstrap+Echarts。嵌入vue使用的是<script>,没有使用vue-cli,请自

项目框架

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,每次都要重新查阅文档+回忆,其实是很费时的。

总结项目套路是很有必要的,我觉得随着工作时间增长,一个人是进步,还是重复工作,和会不会总结有本质联系。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。