admin管理员组文章数量:1794759
ElementUI前端开发技巧整理笔记
ElementUI前端开发技巧整理笔记，本博客不定时更新，整理工作中遇到的问题，整理成笔记
文章目录- 1、实现页面加载效果
- 2、设置表格序号
- 3、实现表格分页效果
- 4、加载表格树形结构数据
- 5、设置表格只能单选效果
- 6、获取表格选择的行数据
- 7、按年月日维度选择日期
- 8、reset重置表单选项值
- 9、Element实现标签页切换
必须定义一个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(); } },版权声明：本文标题：ElementUI前端开发技巧整理笔记 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686500281a74450.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论