elementui树表格使⽤checkbox并可⾃动勾选，动态表格
formatter,el。。。
⼀、elementui树表格使⽤checkbox并⾃动勾选
1、html，要使⽤默认checkbox的type
2、递归出树长度、动态绑定
3、根据点击获取的数据、勾选树表格，getcheckedcopy_是拆开树数据变为没有层级的
getcheckFloor (treeData,clickdata) { //递归使checkbox勾选
let this_ = this
let index = -1
function each (treeData,clickdata) {
for(let i = 0;i<treeData.length;i++){
index++;
this_.getcheckedcopy_.push(treeData[i])
for(let y=0;y<clickdata.length;y++){
if(treeData[i].id == clickdata[y].menu_id){
this_.selemodel[index].selectvalue = true
}
}
if(treeData[i].children){
each(treeData[i].children,clickdata);
}
}
}
each(treeData,clickdata);
},
clickRole(row){
this.checkedall = false
let this_ = this
for (var i = 0; i < ulength; i++) { //先清掉所有
this.selemodel[i].selectvalue = ""
}
this.$uTable.clearSelection()
this.Ajax({
url:"/clickRole",
data:{role_id:row.id},
func:(res=>{
this.checkornot()
})
})
},
4、使⽤elementui的全选事件控制全选按钮、根据checkbox绑定值是否为true判定为勾选
checkornot(){
let getchecked=[]
for(let i=0;i&heckedcopy_.length;i++){//获取勾选数据
if(this.selemodel[i].selectvalue == true){
getchecked.heckedcopy_[i])
}
}
if(getchecked.length == heckedcopy_.length){
this.$leAllSelection()
this.checkedall=false
}
if(this.checkedall){//控制全选按钮
for (let i = 0; i < ulength; i++) { //先清掉所有
if(this.selemodel[i].selectvalue == ''||this.selemodel[i].selectvalue == false){                            this.$uTable.clearSelection()
this.checkedall = false
break;
}
}
}
},
⼆、动态⾏、formatter
<el-table
border
ref="singleTable"
:data="leftTableEle"
highlight-current-row
@row-click="rowselectChange"
:header-cell-
>
<template v-for="(item, index) in left_columns">
<el-table-column
v-if="item.show != false"
:key="index"
:prop="item.prop"
:label="item.label"
:align="item.align?item.align:'center'"
:formatter="item.formatter?item.formatter :null"
></el-table-column>
</template>
</el-table>
数据：
leftTableEle:[
{ startDate:"2019-10-10", endDate:"2019-10-11",mode:"2"}
],
left_columns: [
{ prop: "startDate", label: "开始时间", show: true },
{ prop: "endDate", label: "结束时间", show: true },
{ prop: "mode", label: "计价模型", show: true,formatter:this.Setformatter }
],
三，不固定⾼度，⾃适应出现滚动条
<div class="contant_box">      <div class="tabox">
<el-table
height="100%"            >
</el-table>
</div>
</div>
//css
.contant_box{
position: absolute;
top:40px;
bottom:0;
width: 99%;
}
.tabox {
width:100%;
height:100%;
overflow: hidden;
}
.tabox>div {
height: 100% !important;  }
四、分页
vm.page.pageIndex：当前是第⼏页⾯，1开始
vm.page.size //每页显⽰的的条数
/
/从勾选中的树计量点数组中，根据当前页码、每页显⽰的条数，截取
let findNodeData = list.slice(
(vm.page.pageIndex - 1) * vm.page.size,
vm.page.pageIndex * vm.page.size
);
//html
<el-pagination
class="page-warp"
background
layout="prev, pager, next,sizes,total"
:page-size="page.size"
:
page-sizes="page.pageSizes"
:current-page="page.pageIndex"
:total="al"
@size-change="sizeChange"
@current-change="currentChange"
@prev-click="prevClick"
@next-click="nextClick"
></el-pagination>
//js
page: {
pageSizes: [10, 20, 50, 100, 500, 1000], //每页显⽰条⽬个数        size: 10,
element表格横向滚动条total: 0,
pageIndex: 1
}
currentChange(val) {
let vm = this;
vm.page.pageIndex = val;
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。