elementui樹表格使用checkbox並可自動勾選,動態表格formatter,elementui表格不加固定高度，滾動條自動出現、分頁

一、elementui樹表格使用checkbox並自動勾選

1、html，要使用默認checkbox的type

2、遞歸找出樹長度、動態綁定

 3、根據點擊獲取的數據、勾選樹表格，getcheckedcopy_是拆開樹數據變爲沒有層級的

            getcheckFloor (treeData,clickdata) { //遞歸使checkbox勾選
                this.getcheckedcopy_=[]
                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.getselectded = row
                this.checkedall = false
                let this_ = this
                for (var i = 0; i < this.menulength; i++) { //先清掉所有
                    this.selemodel[i].selectvalue = ""
                }
                this.$refs.menuTable.clearSelection()
                this.Ajax({
                    url:"/clickRole",
                    data:{role_id:row.id},
                    func:(res=>{
                        this.getchecked = res.data.rows
                        this.getcheckedcopy =JSON.parse(JSON.stringify(this.getchecked));
                        this.getcheckFloor(this.menutableData,res.data.rows)
                        this.checkornot()
                    })
                })
            },

4、使用elementui的全選事件控制全選按鈕、根據checkbox綁定值是否爲true判定爲勾選

            checkornot(){
                let getchecked=[]
                for(let i=0;i<this.getcheckedcopy_.length;i++){//獲取勾選數據
                    if(this.selemodel[i].selectvalue == true){
                        getchecked.push(this.getcheckedcopy_[i])
                    }
                }
                if(getchecked.length == this.getcheckedcopy_.length){
                    this.$refs.menuTable.toggleAllSelection()
                    this.checkedall=false
                }
                if(this.checkedall){//控制全選按鈕
                    for (let i = 0; i < this.menulength; i++) { //先清掉所有
                        if(this.selemodel[i].selectvalue == ''||this.selemodel[i].selectvalue == false){
                            this.$refs.menuTable.clearSelection()
                            this.checkedall = false
                            break;
                        }
                    }
                } 
            },

二、動態行、formatter

<el-table
                            border
                            ref="singleTable"
                            :data="leftTableEle"
                            highlight-current-row
                            @row-click="rowselectChange"
                            :header-cell-style="tableHeaderColor"
                            style="width:90%;margin-top:5px;">
                            <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="page.total"
                    @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,
        total: 0,
        pageIndex: 1
      }
    currentChange(val) {
      let vm = this;
      vm.page.pageIndex = val;
      vm.getData();
    },