ElementUI前端开发技巧整理笔记

​​ElementUI​​前端开发技巧整理笔记，本博客不定时更新，整理工作中遇到的问题，整理成笔记

文章目录

• ​​1、实现页面加载效果​​
• ​​2、设置表格序号​​
• ​​3、实现表格分页效果​​
• ​​4、加载表格树形结构数据​​
• ​​5、设置表格只能单选效果​​
• ​​6、获取表格选择的行数据​​
• ​​7、按年月日维度选择日期​​
• ​​8、reset重置表单选项值​​
• ​​9、Element实现标签页切换​​

1、实现页面加载效果

<el-table
  ref="Table"
    :data="apprControlData"
    :header-cell-style="headClass"
    border
    v-loading="loading" element-loading-text="数据加载中..."
    @sort-change="onSortChange">
</el-table>

必须定义一个loading属性

var vm = new Vue({
   el: '#app',
    data:{
        loading: false
        // ...
    }
});

一般在api接口调用时候设置就可以

// 加载办件信息
 loadControlData () {
     this.loading = true;
     var pageSize = this.pageSize;
     var currentPage = this.currentPage;
     console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
  
     var geturl = '${root}/loadControlInfo.do?rows='+pageSize + '&page=' + currentPage + '&sort='+ sort + '&order=' + order;
     $.ajax({
         type: 'get',
         url:geturl,
         contentType: "application/json; charset=utf-8",
         success: function(data) {
             vm.apprControlData = data.rows;
             vm.loading = false;
         },
         error: function(e) {
             console.log("获取数据出现错误：",e);
         }
     })
 }

2、设置表格序号

var vm = new Vue({
   el: '#app',
    data:{
        currentPage: 1,  //当前页
        pageSize: 10, //当前显示条数
        // ...
    }
});

取分页的当前页和当前页数，计算序号

<el-table
    ref="Table"
    :data="apprControlData"
    :header-cell-style="headClass"
    border
    v-loading="loading" element-loading-text="数据加载中..."
    @sort-change="onSortChange">
  <el-table-column
      label="序号"
      width="60"
      align="center">
    <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*pageSize}}</template>
  </el-table-column>
</el-table>

3、实现表格分页效果

​​<el-pagination>​​​加上​​@size-change="handleSizeChange、@current-change="handleCurrentChange"​​处理当前页和当前页数的改变事件

<!--表格-->
<div class="formTable" id="formTable">
<el-table
    ref="Table"
    :data="apprItemData"
    :header-cell-style="headClass"
         row-key="approveItem"
         :tree-props="{children: 'children'}"
         height="420"
    border>
  <el-table-column
      type="selection"
      width="55">
  </el-table-column>
  <el-table-column
      label="序号"
      width="60"
      align="center">
    <template slot-scope="scope">{{scope.$index+1}}</template>
  </el-table-column>
  <el-table-column
      prop="itemCode"
      label="编码">
  </el-table-column>
  <el-table-column
      prop="approveName"
      label="事项名称">
  </el-table-column>
</el-table>
</div>
<!--表格分页-->
<div class="pagination">
  <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5,10, 15, 20, 25]"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRow">
  </el-pagination>
</div>

<script type="text/babel">
 var vm = new Vue({
     el: '#app',
     data:{
         apprItemData : [],
         currentPage: 1,  //当前页
         totalRow: 0, //总页数
         pageSize: 10 //当前显示条数
     },
     computed: {},
     watch: {},
     created() {},
     mounted() {
         this.loadItemData();
},
     methods: {
         // 加载信息
loadItemData () {
             var pageSize = this.pageSize;
             var currentPage = this.currentPage;
             console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
 //debugger;
 var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
             $.ajax({
                 type: 'get',
                 url:geturl,
                 contentType: "application/json; charset=utf-8",
                 success: function(data) {
                     //debugger;
                     console.log("totalRow:"+data.total);
                     vm.apprItemData = data.rows;
                     vm.totalRow = Number(data.total);
                 },
                 error: function(e) {
                     console.log("加载数据出现错误：",e);
                 }
             })
         }
         // 表头样式设置
         headClass() {
             return 'text-align: center;background:#F7F7F7;color:#1C1C1D;'
         },
         //页数变换
         handleSizeChange(val) {
             this.pageSize = val;
             this.loadItemData();
         },
         //当前页变换
         handleCurrentChange(val) {
             this.currentPage = val;
             this.loadItemData();
         }
     }
 });
</script>

4、加载表格树形结构数据

关键代码，在​​el-table​​​添加属性，​​:tree-props="{children: 'children'}"​​​，注意row必须命名为​​children​​，官网也进行了说明：

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

<el-table
    ref="Table"
    :data="apprItemData"
    :header-cell-style="headClass"
        @select="handleSelection"
        row-key="approveItem"
        height="420"
    border
       default-expand-all
       :tree-props="{children: 'children'}">
  <el-table-column
      type="selection"
      width="55">
  </el-table-column>
  <el-table-column
      prop="itemCode"
      label="事项编码">
  </el-table-column>
  <el-table-column
      prop="approveName"
      label="事项名称">
  </el-table-column>
  <el-table-column
      prop="apprStatusStr"
      label="配置的环节"
      color="blue">
  </el-table-column>
</el-table>

后台json数据：

{
    "id":3,
    "itemCode":"123",
    "approveName":"测试事项",
    "apprStatusStr":"环节名称",
    "children":[
        {
            "id":31,
            "itemCode":"111",
            "approveName":"测试事项",
            "apprStatusStr":"环节名称"
        }
    ]
}

<script type="text/babel">
       var vm = new Vue({
           el: '#app',
           data:{
               apprItemData : [],
               currentPage: 1,  //当前页
               totalRow: 0, //总页数
               pageSize: 10 //当前显示条数
           },
           computed: {},
           watch: {},
           created() {},
           mounted() {
               this.loadItemData();
    },
           methods: {
               // 加载事项信息
      loadItemData () {
                   var pageSize = this.pageSize;
                   var currentPage = this.currentPage;
                   console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
          //debugger;
          var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
                   $.ajax({
                       type: 'get',
                       url:geturl,
                       contentType: "application/json; charset=utf-8",
                       success: function(data) {
                           //debugger;
                           console.log("totalRow:"+data.total);
                           vm.apprItemData = data.rows;
                       },
                       error: function(e) {
                           console.log("更新数据出现错误：",e);
                       }
                   })
               }
           }
       });
</script>

5、设置表格只能单选效果

设置样式隐藏表格上面总的选框

thead .el-table-column--selection .cell{
    display: none;
}

table加上​​@selection-change="handleSelectionChange"​​，ref设置个Table作为ref引用

<el-table
  ref="Table"
  :data="apprItemData"
  :header-cell-style="headClass"
             @selection-change="handleSelectionChange"
             row-key="apprItem"
             :tree-props="{children: 'children'}"
             height="420"
  border>
</el-table>

methods加上方法：

handleSelectionChange(val){
  console.log("selection rows:"+val);
     if (val.length > 1) {
         this.$refs.Table.clearSelection()
         this.$refs.Table.toggleRowSelection(val.pop())
     }
}

6、获取表格选择的行数据

​​el-table​​​加上​​@select="handleSelection"​​

<el-table
  ref="Table"
  :data="apprItemData"
  :header-cell-style="headClass"
             @select="handleSelection"
             row-key="approveItem"
             :tree-props="{children: 'children'}"
             height="420"
  border>
</el-table>

// 选择表格行
handleSelection (selection, row) {
  this.selectRows = row;
  this.selectTotal = selection.length;
  //console.log(row);
  //console.log(selection.length);
}

然后在其它方法里，直接从this获取自己定义的vue对象拿就行

var rows = this.selectRows;
console.log("rows:"+rows);
 var size = this.selectTotal;
 console.log("size:" + size);
 if (size < 1) {
         top.dialog({title: '提示',content: "请选择至少一个选项！"}).show();
         return;
 }
var selItemName = rows.itemName;

对表格数据进行遍历：

let approveItems ="";
 let itemArr = [];
 this.$refs.Table.selection.forEach(e => {
     itemArr.push(e.approveItem)
 })
 console.log("itemArr:" +itemArr);
 approveItems = itemArr.toString();
 console.log("approveItems:"+approveItems);

7、按年月日维度选择日期

这个有点难理解，那就按最近产品原型给的原型说明，产品将一个列表的日期选择设计成按年月日维度进行选择，首先选择按年维度，如图显示：

按月维度，显示当前的月份，当然也可以回退年份，选择后显示如​​​2021-06​​​
按日维度，也是最常用的，选择后显示格式为​​yyyy-MM-DD​​
刚接到需求，有点没思路，对于一个后台开发来说，稍微想了一会想到将​​<el-date-picker>​​的type属性设置成动态的​​:type="dateType"​​就可以

先做一个统计维度的下拉框：

<el-form-item size="small" prop="countSel" label="统计维度">
  <el-select  @change="countSelectChange" v-model="detailSearchForm.countSel" placeholder="请选择" :style="{width: '100px'}">
    <el-option
        v-for="item in countSelects"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-select>
</el-form-item>

var vm = new Vue({
    el: '#app',
    data:{
        countSelects : [{
            value: '1',
            label: '按年'
        }, {
            value: '2',
            label: '按月'
        }, {
            value: '3',
            label: '按日'
        }]
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
    },
    methods: {
    }
});

加两个日期选择控件，设置​​:type="dateType"​​​，​​dateType​​​是自己设置的值，​​value-format​​​加个动态参数​​valueFormat​​

<el-form-item size="small"  label="统计时间" prop="countSTime">
  <el-date-picker
      v-model="detailSearchForm.countSTime"
      :type="dateType"
      :value-format="valueFormat"
      placeholder="选择日期"
           :style="{width: '180px'}">
  </el-date-picker>
</el-form-item>
<el-form-item size="small" prop="countETime">
  <el-date-picker
      v-model="detailSearchForm.countETime"
      :type="dateType"
      :value-format="valueFormat"
      placeholder="选择日期"
            :style="{width: '180px'}">
  </el-date-picker>
</el-form-item>

data加两个默认值：

dateType : 'date',
valueFormat: 'yyyy-MM-dd'

下拉选择框加@change函数​​countSelectChange​​

<el-select  @change="countSelectChange" v-model="detailSearchForm.countSel" placeholder="请选择" :style="{width: '100px'}"></el-select>

// 统计维度变换
countSelectChange (val) {
      console.log("统计维度："+val);
     if (val === '1') {
         vm.dateType = 'year';
         vm.valueFormat = 'yyyy';
     } else if (val === '2') {
         vm.dateType = 'month';
         vm.valueFormat = 'yyyy-MM';
     } else {
         vm.dateType = 'date';
         vm.valueFormat = 'yyyy-MM-dd';
     }
}

8、reset重置表单选项值

<el-button @click="detailResetForm">重置</el-button>

form添加​​ref​​

<el-form :model="detailSearchForm" :inline="true" ref="detailSearchForm">

detailResetForm() {
  this.$refs['detailSearchForm'].resetFields();
},

9、Element实现标签页切换

标签页在实际的应用中用的很多

直接引入​​​el-tabs​​

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="汇总统计" name="first">
  <el-tab-pane label="明细查询" name="second">
</el-tabs>

handleClick(tab, event) {
    console.log(tab, event);
     if(tab.name == 'second'){
         this.loadEvaluateDetailList();
     }else{
         this.loadEvaluateCountData();
     }
 },