elementui树表格使用checkbox并可自动勾选,动态表格formatter,elementui表格不加固定高度，滚动条自动出现、分页

偏执的太偏执、 2022-01-10 06:49 370阅读 0赞

一、elementui树表格使用checkbox并自动勾选

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

2、递归找出树长度、动态绑定

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20220109/c655be1f8bf748c99ab49a09ea6b01aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1]: /images/20220109/1942a1857a2f48a984ceaab48306af4d.png