Element-ui+Vue+jQuery+Bootstrap+Echarts。
嵌入vue使用的是<script>，没有使用vue-cli，请自行将<template>内代码贴入html，<style>内代码贴入样式表。
checkbox全选和全不选
<template> <el-form-item label="地电阻率选项:"> <el-checkbox v-model="eidAll" @change="handleEidAllChange">全选</el-checkbox> <el-checkbox-group v-model="searchItem.eid"> <el-checkbox 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> <div> <div> <el-row> <el-col v-for="item of tableHeadList" :span="item.col"> <div> {{ item.text }} </div> </el-col> </el-row> </div> </div> <div> <div v-for="(item, index) of tableData"> <el-row> <el-col v-for="bodyItem of tableBodyList" :span="bodyItem.col"> <div> {{ 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> <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 :id="'echart'+item.id"></div>` }); </script>
后记