Summary of the use of Element-UI+Vue mode

<template>
  <el-form-item label="Ground resistivity options:">
    <el-checkbox class="search_item" v-model="eidAll" @change="handleEidAllChange">Select all</el-checkbox>
    <el-checkbox-group v-model="">
      <el-checkbox class="search_item" v-for="item of eidList" :label="">{{  }}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>

<script>
var app = new Vue({
  el: '#app',
  data: {
    // Select all variables    eidAll: false
    // checkbox single item    searchItem: {
      eid: [],
    },
    // checkbox data loop    eidList: [{
      name: 'Missing number',
      value: 'DZ1'
      // ...
    }]
  },
  methods: {
    // Select all processing    handleEidAllChange() {
      if () {
         = [];
        var arr = [];
        for (let i in ) {
          ([i].value);
        }
         = arr;
      } else {
         = [];
      }
    },
  },
  watch: {
    // Listen to checkboxes to select all    "": function() {
      if ( == ) {
         = true
      } else {
         = false
      }
    }
  }
});
</script>

<template>
  <div class="table">
    <div class="thead">
      <div class="tr">
        <el-row>
          <el-col v-for="item of tableHeadList" :span="">
            <div class="th">
              {{  }}
            </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="">
            <div class="td">
              {{ item[] }}
            </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 data loop    tableHeadList: [{
      // According to type, the title content of v-if th, and the text or checkbox should be placed according to the needs.      type: 'text',
      // Each grid occupies a grid, the total number of element-ui grids is 24      col: '1',
      // th title      text: 'ID'
    }],
    // td data loop    tableBodyList: [{
      type: 'text',
      col: '1',
      // The interface returns the field      field: 'id'
    }],
    // Table data    tableData: [...]
  }
});
</script>

<script>
var app = new Vue({
  el: '#app',
  mounted: function() {
    // Listen to scroll    ();
  },
  data: {
    // Load all data. Please initialize to false when changing the query conditions.    loadAll: false,
    // Page number, please initialize to 1 when changing the query conditions    offset: 1,
    // Table data, please clear it first when changing the query conditions    tableData: []
  },
  methods: {
    // Handle scroll loading    handleScrollLoad() {
      var $this = this

      var nScrollHight = 0;
      var nScrollTop = 0;
      var nDivHight = $(".table .tbody").height();
      $(".table .tbody").scroll(function() {
        if ($) {
          // No operation after all loading          return;
        }
        nScrollHight = $(this)[0].scrollHeight;
        nScrollTop = $(this)[0].scrollTop;
        if (nScrollTop + nDivHight >= nScrollHight) {
          // Slide to the bottom, offset increment          // Because the offset defined by our backend is actually a page, which represents which page, not the true offset          // Those in need can convert to $ += $;          $ += 1;
          $()
        }
      });
    },
    // Query table data    searchData() {
      ...
      var $this = this
      (str)
      .then(res => {
        if ( === 200) {
          // The request is normal, and determine whether the complete loading is done          if ( === 0) {
            $ = true;
            return;
          }
          for (let i of ) {
            $(i);
          }
        } else {
          // Request error          alert('Request error, error code:' + );
        }
      }, e => {
         = false;
        throw new Error('Request failed:' + e);
      })
    }
  }
});
</script>

<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: {
    // Curve data    echartsData: []
  }
});

/************************ Curve Example************************/
('charts', {
  props: {
    item: Object
  },
  methods: {
    // Initialize the curve    initChart() {
      this['echart' + ()] = (('echart' + ));
      ();
    },
    setChart() {
     var $this = this
     let option = {
        ...
      };
      this['echart' + ].setOption(option);
    }
  },
  mounted() {
    ();
  },
  watch: {
   item: {
     handler: function () {
      ();
     },
     deep: true
   }
  },
  template: `<div class="echart_item" : style="height:260px;"></div>`
});
</script>