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 继承详解(一)
Jul 13 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP代码优化技巧小结
2015/09/29 PHP
js tab 选项卡
2009/04/26 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
原生js实现日历效果
2020/03/02 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python实现二维插值的三维显示
2018/12/17 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
思想品德自我鉴定
2013/10/12 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
讲党性心得体会
2014/09/03 职场文书
安全教育日主题班会
2015/08/13 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL