Element-UI+Vue模式使用总结

小诸哥 2022-05-22 23:29:19 0

项目框架

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>