Element-UI+Vue模式使用總結

發布時間: 2020-01-02 16:26:28 來源: 互聯網 欄目: JavaScript 點擊:

這篇文章主要介紹了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,每次都要重新查閱文檔+回憶,其實是很費時的。

總結項目套路是很有必要的,我覺得隨著工作時間增長,一個人是進步,還是重復工作,和會不會總結有本質聯系。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。

本文標題: Element-UI+Vue模式使用總結
本文地址: http://www.1921352.live/wangluo/javascript/296753.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    在weex中愉快的使用scss的方法步驟微信小程序地圖繪制線段并且測量(實例代碼)
    Top 网上挖矿机赚钱