ElementUI前端开发技巧整理笔记

短命女 2021-09-08 13:22 452阅读 0赞

[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);
             }
         })
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]

### 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 1]

### 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 2]

### 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":"环节名称"
            }
        ]
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 3]

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

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

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

![在这里插入图片描述][20210602110242734.png]

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())
         }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 4]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 5]

`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);
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 6]  
然后在其它方法里，直接从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、按年月日维度选择日期 ###

这个有点难理解，那就按最近产品原型给的原型说明，产品将一个列表的日期选择设计成按年月日维度进行选择，首先选择按年维度，如图显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 7]  
按月维度，显示当前的月份，当然也可以回退年份，选择后显示如`2021-06`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 8]  
按日维度，也是最常用的，选择后显示格式为`yyyy-MM-DD`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 9]  
刚接到需求，有点没思路，对于一个后台开发来说，稍微想了一会想到将`<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实现标签页切换 ###

标签页在实际的应用中用的很多  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 10]  
直接引入`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();
         }
     },

[ElementUI]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]: /images/20210813/136af2e5ce644f2bbc702de415c4e293.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 1]: /images/20210813/3f535b9e34e74220be43f2017e6f1c1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 2]: /images/20210813/83fb24d43d9b466aae525ba122ca845e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 3]: /images/20210813/c2e8ff7f19e449b89d772483d4be95fc.png
[20210602110242734.png]: /images/20210813/616e0c841e214bb6b750029c9b8061b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 4]: /images/20210813/864a6a70904440d08c8edf0efcf6bd43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 5]: /images/20210813/8569da8de5014000a52721fe839387a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 6]: /images/20210813/4a42f6b0a624476ab7453397e15fa5e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 7]: /images/20210813/7f1c4473e6624406a6f90bd715d58f12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 8]: /images/20210813/320a3dc810d54073bdd624d8f59ea09f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 9]: /images/20210813/fdb02bc040dd4d948d125c5b4fbe0bad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 10]: /images/20210813/0b7c512c694946cbaec3952691049070.png