Element table使用技巧详解 |
您所在的位置:网站首页 › elementui合并列 › Element table使用技巧详解 |
Element table使用技巧详解
转载
mb5fdb0ff6b2aaf 2018-06-07 12:17:00 文章标签 h5 自定义 数组 json 赋值 文章分类 代码人生 1、控制table某些行数不显示 下载附件的需求,有些行有附件,有些没有,所以需要过滤,重点是:Array.filter()使用 附件列表 {{scope.row.attach}}2、elementUI的table自定义合计方法 //1、table上添加summary-method自定义计算方法 //2、选择的行数据 handleSelectionChange(rows){ this.orders = rows }, //3、合计规则:注意return的是与列对应的数组 totalRule(){ let sum = 0 this.orders.forEach(item => { sum += item.price }) return ['合计','','','',sum,''] },3、elementUi的tabel组件如果要显示合计的话,下面的prop是必须得加的 {{scope.row.service_price}}4、elementUi的tabel组件复选框控制禁止选择 //methods里 checkboxInit(row,index){ if (row.withdrawState==2)//这个判断根据你的情况而定 return 0;//不可勾选,或者是return false/true else return 1;//可勾选 }5、table展开功能 远程工具列表: {{ props.row.instructions }} 查看 //1、首先需要:row-key="name" :expand-row-keys="expands" //2、点击查看的方法:如果expands没有就把name push进去,下面这种是一次只能展开一个,点击别的,关闭之前的 view(row){ if (this.expands.indexOf(row.name) < 0) { this.expands = [] this.expands.push(row.name); } else { this.expands = [] } },6、表格筛选功能 //1、首先需要加上下面这些,prop是必须加的,否则不生效 //2、定义categoryFilter数组存filter字段,然后在获取数据的时候去遍历赋值 fetchData(){ getScriptListApi().then(res => { if(res.status === 200){ this.scriptData = res.data res.data.forEach(item => { this.initFilter(this.typeFilter,item.type) this.initFilter(this.categoryFilter,item.category) }) } }) }, //3、加上下面2个公共方法即可 initFilter(array,item){ let _obj = { text:item, value:item } if(JSON.stringify(array).indexOf(JSON.stringify(_obj)) === -1){ array.push(_obj) } }, filterType(value,row,column){ const property = column['property']; return row[property] === value; },另外还有一个 filter-change 方法(用@filter-change绑定),要在table根节点上设,而不是el-table-column节点的方法,那是个全局的方法,只要你的表头有filter变化了,就会触发 赞 收藏 评论 分享 举报上一篇:vue当前路由跳转初步研究 下一篇:Spring Boot应用连接数据库MySQL、及一个简单的demo |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |