项目框架
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>
