Element-UI+Vue模式使用总结


Posted in Javascript onJanuary 02, 2020

项目框架

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

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

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

Javascript 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
JS代码触发事件代码实例
Jan 02 #Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 #Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 #Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 #Javascript
JS实现秒杀倒计时特效
Jan 02 #Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 #Javascript
You might like
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Unicode和Python的中文处理
2017/03/19 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python基于property()函数定义属性
2020/01/22 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
微笑服务演讲稿
2014/05/13 职场文书
改革共识倡议书
2014/08/29 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js