Element-UI+Vue模式总结

项目框架

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

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

共勉吧。