vue项目结合iview4UI组件实现树状结构及复杂动态表头列表 Tree-Table 及复杂header 省市区树状表格联动 数据优化后台一次性返回一万条数据页面卡死问题

最新推荐文章于 2024-07-22 14:10:26 发布
置顶 最新推荐文章于 2024-07-22 14:10:26 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端小强踩坑之路 文章标签： javascript vue.js jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hzq88888/article/details/113741979
版权
本文详细介绍了如何使用Vue.js和iView UI库构建一个具有前端数据分页和动态列显示的表格。表格数据通过树状结构展示省市区县街道，并根据用户选择是否为医保专用合作商数据控制列的显示。当数据量大时，通过监听滚动条事件进行数据分页，避免页面卡顿。此外，表格列的显示根据后台动态返回的日期和当前核销量数据进行调整。
摘要由CSDN通过智能技术生成

一、首先看看需求最终效果图，该需求总共罗列以下几点

  1. 最左侧采用树状结构将地址省市区县街道展示出来，并且控制名称长度限制，多余的用省略号表示，鼠标悬浮上去名称展示出来
  2. 列表默认展示市一级数据，县及街道数据都是点击+按钮，通过ajax向后台请求获得
  3. 该页面做了前端数据优化处理，地区数据是后端一次性返回的，所以页面渲染会很卡，前端采用监听滚动条事件实行数据分页解决卡死问题
  4. 表头日期也是后端动态获得，其中，列表中当前核销量列数据的显隐是根据是否为医保专用合作商数据控制的，选择是查询，当前核销量字段会显示，否则，该列消失，具体情况看下面代码  

二、表格数据html及css部分

.adressTable .ivu-table-cell {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0!important;
        }
        .ivu-table th.test-name {
            background: #1b90f0;
            color: #fff;
            text-align: center;
            font-size: 12px!important;
        }
        table td{
            padding: 0!important;
        }

.dataTabList {
  width: 100px;
  height: 30px;
  display: flex;
  margin-right: 35px;
  background: #e4ebf0;
}
.dataTabList .dataTabli {
  width: 50px;
  height: 30px;
  font-size: 14px;
  border: 1px solid #999;
  color: #666;
  line-height: 30px;
  text-align: center;
  background: #fff;
  cursor: pointer;
}
.dataTabList .dataTabActive {
  background: #1b90f0;
  color: #fff;
}
<Card :bordered="false" style="margin-bottom:20px;">
   <i-form :model="formInline" ref="formInline" inline :label-width="70">
      <Row style="margin-bottom: 20px">
          <i-col span="8">
             <Form-Item label="是否为医保专用合作商数据:" style="width:100%;" 
                  prop="isMedicalPay" :label-width="165">
                       <Radio-Group v-model="formInline.isMedicalPay">
                         <Radio label="1">是</Radio>
                          <Radio label="0">否</Radio>
                         </Radio-Group>
                 </Form-Item>
           </i-col>
          <i-col span="2" offset="14">
             <i-button type="primary" style="width:100%;"@click="getList(1,true);currentPage=1;" :loading="searchFlag">查询</i-button>
          </i-col>
      </Row>
  </i-form>
</Card>


<Card :bordered="false" :padding="20">
    <p slot="title" style="font-size: 16px;color: #333">地区数据列表</p>
    <div slot="extra" style="display: flex;align-items: center">
        <div class="dataTabList">
            <div class="dataTabli"
                 v-for="(item,index) in dataTabList"
                 :key="index"
                 :class="{dataTabActive:dataTabNum==item.value}"
                 @click="signDataTable(item.value)"
            >{{item.label}}</div>
        </div>
        <i-button type="primary" slot="extra" class="daoBtnStyls"                     
         @click="updateModel=true">导出</i-button>
    </div>
    <i-Table row-key="name" update-show-children :max-height="tableHeight" :load-data="handleLoadData" :loading="loading" :columns="tabelHeard" :data="tableBodyList" border class="adressTable"></i-Table>
</Card>

三、vue代码及方法

data: function() {
            return{
                dataTabList:[
                    {
                        value:'1',
                        label:'省'
                    },
                    {
                        value:'2',
                        label:'市'
                    }
                ],
                dataTabNum:2,
                tabelHeard: [],
                tableBodyList: [],
                addressList:[],
                formInline:{
                    date:'2021-02-01',
                    province:'',
                    city:'',
                    isMedicalPay:'1'
                },
                searchFlag:false,
                detailDataListAll:[],
                detailPageSize:6,
                detailTotal:0,
                pageIndex:1,
                totalPage:1,
                tableHeight: 500,
                loading: false,
            }
        },
mounted:function(){
            var _this = this
            _this.getList(1);
            _this.$nextTick(() => {
                var tableScrol = document.getElementsByClassName('ivu-table-body')[0]
                tableScrol.addEventListener("scroll", (v) => {
                    var scrollDistance = tableScrol.scrollHeight - tableScrol.scrollTop -         tableScrol.clientHeight;
                    if (scrollDistance <= 0) {
                        if (_this.pageIndex >= _this.totalPage) {
                            _this.$Message.error('还滑，我已经到底了！！！')
                        }
                        if (_this.pageIndex < _this.totalPage) {
                            _this.pageIndex++;
                            _this.changepage(_this.pageIndex)
                        }
                    }
                });
            })
        },
        methods: {
            changepage:function(index) {
                var _this=this;
                var _start = (index - 1) * _this.detailPageSize;
                var _end = index * _this.detailPageSize;
                var newList = _this.detailDataListAll.slice(_start, _end);
                if(_this.dataTabNum==2){
                    newList.forEach(function (item) {
                        item._showChildren = true
                    })
                }else{
                    newList.forEach(function (item) {
                        item._showChildren = false
                    })
                }
                for(var i of newList){
                    _this.tableBodyList.push(i)
                }
                var set = new Set(_this.tableBodyList);
                _this.tableBodyList = Array.from(set)
            },
            signDataTable:function(value){
                var _this = this;
                _this.dataTabNum = value;
                _this.pageIndex = 1
                if(_this.dataTabNum==2){
                    _this.detailPageSize = 6
                    _this.tableHeight = 500
                }else{
                    _this.detailPageSize = 10
                    _this.tableHeight = 350
                }
                _this.totalPage = _this.detailTotal/_this.detailPageSize
                if (_this.detailTotal < _this.detailPageSize) {
                    _this.tableBodyList = _this.detailDataListAll;
                } else {
                    _this.tableBodyList = _this.detailDataListAll.slice(0, _this.detailPageSize);
                }
                _this.getPackageData()
            },
            getPackageData:function(){
                var _this = this;
                if(_this.dataTabNum==2){
                    _this.tableBodyList.forEach(function (item) {
                        item._showChildren = true
                    })
                }else{
                    _this.tableBodyList.forEach(function (item) {
                        item._showChildren = false
                    })
                }
                _this.tableBodyList.forEach(function (item) {
                    if(item.name=='无'){
                        delete item._showChildren;
                        delete item._loading;
                    }
                })
                var isYibao;
                var noYibao;
                isYibao = [
                    {
                        title: '省市区',
                        key: 'name',
                        tree: true,
                        width: 220,
                        className: 'test-name',
                        render: (h, params) => {
                            let self = this
                            return h('div',{
                                style:{
                                    height:'15px',
                                    lineHeight:'15px'
                                }
                            }, [
                                h('span',{
                                    style:{
                                        fontSize:'12px',
                                        color:'#666',
                                        display: 'inline-block',
                                        width: '144px',
                                        height:'15px',
                                        marginLeft:'7px',
                                        marginRight:'20px',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    },domProps: {
                                        title: params.row.name
                                    }
                                },  params.row.name),
                            ])

                        },
                        renderHeader:(h,params)=>{
                            var self = this
                            return h('div', [
                                h('span', ''),
                            ])
                        },
                    },
                    {
                        key: 'hxAllNums',
                        width: 110,
                        className: 'test-name',
                        render:(h,params) => {
                            var self = this
                            if(params.row.grade==1){
                                return h('div', [
                                    h('span',
                                        {
                                            style:{
                                                fontSize: '12px',
                                                color:'#666'
                                            }
                                        },
                                        params.row.saleNums),
                                    h('span',{
                                        style:{
                                            width:'40px',
                                            height:'18px',
                                            textAlign:'center',
                                            lineHeight:'18px',
                                            display:'inline-block',
                                            fontSize: '12px',
                                            color: '#333',
                                            marginLeft:'10px',
                                            backgroundColor:'rgba(27,144,240,0.2)',
                                            borderRadius:'5px'
                                        }
                                    }, '一档'),
                                ])
                            }else if(params.row.grade==2){
                                return h('div', [
                                    h('span',
                                        {
                                            style:{
                                                fontSize: '12px',
                                                color:'#666'
                                            }
                                        },
                                        params.row.saleNums),
                                    h('span',{
                                        style:{
                                            width:'40px',
                                            height:'18px',
                                            textAlign:'center',
                                            lineHeight:'18px',
                                            display:'inline-block',
                                            fontSize: '12px',
                                            color: '#333',
                                            marginLeft:'10px',
                                            backgroundColor:'rgba(27,144,240,0.4)',
                                            borderRadius:'5px'
                                        }
                                    }, '二档'),
                                ])
                            }else if(params.row.grade==3){
                                return h('div', [
                                    h('span',
                                        {
                                            style:{
                                                fontSize: '12px',
                                                color:'#666'
                                            }
                                        },
                                        params.row.saleNums),
                                    h('span',{
                                        style:{
                                            width:'40px',
                                            height:'18px',
                                            textAlign:'center',
                                            lineHeight:'18px',
                                            display:'inline-block',
                                            fontSize: '12px',
                                            color: '#333',
                                            marginLeft:'10px',
                                            backgroundColor:'rgba(27,144,240,0.6)',
                                            borderRadius:'5px'
                                        }
                                    }, '三档'),
                                ])
                            }else if(params.row.grade==4){
                                return h('div', [
                                    h('span',
                                        {
                                            style:{
                                                fontSize: '12px',
                                                color:'#666'
                                            }
                                        },
                                        params.row.saleNums),
                                    h('span',{
                                        style:{
                                            width:'40px',
                                            height:'18px',
                                            textAlign:'center',
                                            lineHeight:'18px',
                                            display:'inline-block',
                                            fontSize: '12px',
                                            color: '#333',
                                            marginLeft:'10px',
                                            backgroundColor:'rgba(27,144,240,0.8)',
                                            borderRadius:'5px'
                                        }
                                    }, '四档'),
                                ])
                            }else if(params.row.grade==5){
                                return h('div', [
                                    h('span',
                                        {
                                            style:{
                                                fontSize: '12px',
                                                color:'#666'
                                            }
                                        },
                                        params.row.saleNums),
                                    h('span',{
                                        style:{
                                            width:'40px',
                                            height:'18px',
                                            textAlign:'center',
                                            lineHeight:'18px',
                                            display:'inline-block',
                                            fontSize: '12px',
                                            color: '#333',
                                            marginLeft:'10px',
                                            backgroundColor:'rgba(27,144,240,1)',
                                            borderRadius:'5px'
                                        }
                                    }, '五档'),
                                ])
                            } else{
                                return h('div', [
                                    h('span', ''),

                                ])
                            }
                        },
                        renderHeader:(h,params)=>{
                            var self = this
                            return h('div', [
                                h('span', '当前核销量'),
                            ])
                        },
                    },
                ]
                if(_this.formInline.isMedicalPay==1){
                    _this.tabelHeard = isYibao
                }else{
                    noYibao = isYibao.splice(0,1)
                    _this.tabelHeard = noYibao
                }
                for(var i=0;i<_this.tableBodyList[0].hxNums1.length;i++){
                    var t = i;
                    if(_this.formInline.isMedicalPay==1){
                        if(_this.tabelHeard.length<9){
                            _this.tabelHeard.push({
                                align: 'center',
                                className: 'test-name',
                                children: [
                                    {
                                        title: '核销数',
                                        key: 'hxNums1',
                                        align: 'center',
                                        // width: 90,
                                        className: 'test-name',
                                        render:(h,params)=>{
                                            var idx = parseInt(params.column._index/2-1);
                                            var ss = params.row.hxNums1[idx] != undefined ? params.row.hxNums1[idx].writeOffNum : '';
                                            return h('div', [
                                                h('span',{
                                                    style:{
                                                        fontSize:'12px',
                                                        color:'#666'
                                                    }
                                                }, ss),
                                            ]);
                                        },
                                    },
                                    {
                                        title: '实名数',
                                        key: 'hxNums1',
                                        align: 'center',
                                        // width: 90,
                                        className: 'test-name',
                                        render:(h,params)=>{
                                            var idx = parseInt(params.column._index/2)-1;
                                            var ss = params.row.hxNums1[idx] != undefined ? params.row.hxNums1[idx].realNameNum : '';
                                            return h('div', [
                                                h('span',{
                                                    style:{
                                                        fontSize:'12px',
                                                        color:'#666'
                                                    }
                                                }, ss),
                                            ]);
                                        }
                                    }
                                ],
                                renderHeader:(h,params)=>{
                                    var idx = parseInt(params.column._index/2);
                                    var ss = _this.tableBodyList[0].hxNums1[params.index-2].hfTime;
                                    return h('div', [
                                        h('span', ss),
                                    ]);

                                },
                            });
                        }
                    }else{
                        if(_this.tabelHeard.length<8){
                            _this.tabelHeard.push({
                                align: 'center',
                                className: 'test-name',
                                children: [
                                    {
                                        title: '核销数',
                                        key: 'hxNums1',
                                        align: 'center',
                                        className: 'test-name',
                                        render:(h,params)=>{
                                            var idx = parseInt(params.column._index/2);
                                            var ss = params.row.hxNums1[idx] != undefined ? params.row.hxNums1[idx].writeOffNum : '';
                                            return h('div', [
                                                h('span',{
                                                    style:{
                                                        fontSize:'12px',
                                                        color:'#666'
                                                    }
                                                }, ss),
                                            ]);
                                        },
                                    },
                                    {
                                        title: '实名数',
                                        key: 'hxNums1',
                                        align: 'center',
                                        className: 'test-name',
                                        render:(h,params)=>{
                                            var idx = parseInt(params.column._index/2)-1;
                                            var ss = params.row.hxNums1[idx] != undefined ? params.row.hxNums1[idx].realNameNum : '';
                                            return h('div', [
                                                h('span',{
                                                    style:{
                                                        fontSize:'12px',
                                                        color:'#666'
                                                    }
                                                }, ss),
                                            ]);
                                        }
                                    }
                                ],
                                renderHeader:(h,params)=>{
                                    var idx = parseInt(params.column._index/2);
                                    var ss = _this.tableBodyList[0].hxNums1[params.index-1].hfTime;
                                    return h('div', [
                                        h('span', ss),
                                    ]);

                                },
                            });
                        }
                    }
                }
                _this.loading = false
            },
            getList:function(page,isSearch) {
                var _this=this;
                if(isSearch){
                    _this.searchFlag = true
                    _this.pageIndex = 1
                }
                _this.loading = true
                $.ajax({
                    type: 'post',
                    url: '../../../../data/zfbDataList.json',
                    // url: 'http://192.168.1.51:8082/lxzfb/zfbAreaData?date=2021-01-01&isYb=0',
                    data: {
                        endTime: _this.formInline.date,
                        province:_this.formInline.province,
                        city:_this.formInline.city,
                        isYb:_this.formInline.isMedicalPay,
                    },
                    dataType:'json',
                    success: function (data) {
                        if (data.status === 200) {
                            _this.detailDataListAll = data.body.addressList1
                            _this.detailTotal = data.body.totalSize
                            _this.totalPage = _this.detailTotal/_this.detailPageSize
                            if (_this.detailTotal < _this.detailPageSize) {
                                _this.tableBodyList = _this.detailDataListAll;
                            } else {
                                _this.tableBodyList = _this.detailDataListAll.slice(0, _this.detailPageSize);
                            }
                            // _this.tableBodyList = JSON.stringify(data.body);
                            // _this.tableBodyList = _this.tableBodyList.replace(/loading/g, "_loading").replace(/dataList/g, "hxNums1").replace(/cityList/g, "children").replace(/showChildren/g, "_showChildren")
                            // _this.tableBodyList = JSON.parse(_this.tableBodyList);
                            _this.getPackageData()
                            if(isSearch){
                                _this.$Message.success('查询成功！');
                            }
                        }else{
                            _this.$Message.error(data.message);
                        }
                        _this.searchFlag = false
                        _this.loading = false
                    },
                    error: function () {
                        _this.loading = false
                        _this.searchFlag = false
                        _this.$Message.error('请求失败，请稍后重试！')
                    }
                });
            },
            handleLoadData:function (item, callback) {
                var _this = this
                // var urls=''
                // if(item.countyName){
                //     urls= 'http://192.168.1.51:8082/lxzfb/getAreaData?date=2021-01-01&isYb=0&province=云南省&city=文山壮族苗族自治州&type=2&county=文山市'
                // }else{
                //     urls= 'http://192.168.1.51:8082/lxzfb/getAreaData?date=2021-01-01&isYb=0&province=云南省&type=1&city=文山壮族苗族自治州'
                // }
                $.ajax({
                    type: 'post',
                    url: '../../../../data/zfbDataList.json',
                    // url: urls,
                    data: {
                        province:item.province,
                        city:item.city,
                        county:item.county,
                        Type:!item.county?'1':'2' //1获取区 2获取街道
                    },
                    dataType:'json',
                    success: function (data) {
                        if (data.status === 200) {
                            // _this.dateValue22 = JSON.stringify(data.body);
                            // _this.dateValue22 = _this.dateValue22.replace(/loading/g, "_loading").replace(/dataList/g, "hxNums1").replace(/cityList/g, "children").replace(/showChildren/g, "_showChildren")
                            // _this.dateValue22 = JSON.parse(_this.dateValue22);
                            _this.dateValue22=data.body.dateValue;
                            _this.dateValue22.forEach(function (item) {
                                if(item.townName){
                                    delete item._showChildren;
                                    delete item._loading;
                                }
                            })
                            callback( _this.dateValue22);
                        }else{
                            _this.$Message.error(data.message);
                        }
                        _this.searchFlag = false
                    },
                    error: function () {
                        _this.searchFlag = false
                        _this.$Message.error('请求失败，请稍后重试！')
                    }
                });
        },
}

四、后端数据格式返回

  1. 省市后端数据格式
"addressList1":[
        {
          "id": "111",
          "name": "江西",
          "_showChildren":true,
          "hxNums1": [
            {
              "hfTime":"2021-01-02",
              "writeOffNum":"1",
              "realNameNum":"4"
            },
            {
              "hfTime":"2021-01-03",
              "writeOffNum":"2",
              "realNameNum":"5"
            },
            {
              "hfTime":"2021-01-14",
              "writeOffNum":"3",
              "realNameNum":"6"
            },
            {
              "hfTime":"2021-01-15",
              "writeOffNum":"33333333",
              "realNameNum":"555555"
            },
            {
              "hfTime":"2021-01-06",
              "writeOffNum":"2",
              "realNameNum":"5"
            },
            {
              "hfTime":"2021-01-17",
              "writeOffNum":"3",
              "realNameNum":"6"
            },
            {
              "hfTime":"2021-01-18",
              "writeOffNum":"33333333",
              "realNameNum":"555555"
            }
          ],
          "children": [
            {
              "id": "10100",
              "province": "江西省",
              "city": "南昌市",
              "name": "南昌市",
              "type": 1,
              "saleNums":"111111",
              "grade":"1",
              "hxNums1": [
                {
                  "hfTime":"2021-01-02",
                  "writeOffNum":"1",
                  "realNameNum":"4"
                }
              ],
              "_loading": false,
              "children": []
            },
            {
              "id": "10100",
              "name": "抚州市",
              "province": "江西省",
              "grade":"2",
              "saleNums":"333333",
              "type": 1,
              "hxNums1": [
                {
                  "hfTime":"2021-01-02",
                  "writeOffNum":"1",
                  "realNameNum":"99999"
                },
                {
                  "hfTime":"2021-01-03",
                  "writeOffNum":"3333",
                  "realNameNum":"5"
                }
              ],
              "_loading": false,
              "children": []
            }
          ]
        },
        {
          "id": "222",
          "name": "浙江省",
          "hxNums1": [
            {
              "hfTime":"2021-01-02",
              "writeOffNum":"1",
              "realNameNum":"4"
            },
            {
              "hfTime":"2021-01-03",
              "writeOffNum":"2",
              "realNameNum":"5"
            },
            {
              "hfTime":"2021-01-14",
              "writeOffNum":"3",
              "realNameNum":"6"
            }
          ],
          "_showChildren":true,
          "children": [
            {
              "id": "10100",
              "name": "金华市",
              "grade":"3",
              "hxNums1": [
                {
                  "hfTime":"2021-01-02",
                  "writeOffNum":"1",
                  "realNameNum":"4"
                },
                {
                  "hfTime":"2021-01-03",
                  "writeOffNum":"2",
                  "realNameNum":"5"
                },
                {
                  "hfTime":"2021-01-14",
                  "writeOffNum":"3",
                  "realNameNum":"6"
                }
              ],
              "saleNums":"666666",
              "_loading": false,
              "children": []
            },
            {
              "id": "10100",
              "name": "温州市",
              "grade":"5",
              "hxNums1": [
                {
                  "hfTime":"2021-01-02",
                  "writeOffNum":"核销1",
                  "realNameNum":"实名1"
                },
                {
                  "hfTime":"2021-01-03",
                  "writeOffNum":"核销11",
                  "realNameNum":"实名22"
                },
                {
                  "hfTime":"2021-01-14",
                  "writeOffNum":"核销111",
                  "realNameNum":"实名33"
                }
              ],
              "saleNums":"333333",
              "_loading": false,
              "children": []
            }
          ]
        },
        {
          "id": "333",
          "name": "福建",
          "hxAllNums": "453543",
          "_showChildren":true,
          "hxNums1": [
            {
              "hfTime":"2021-01-02",
              "writeOffNum":"1111",
              "realNameNum":"4"
            },
            {
              "hfTime":"2021-01-03",
              "writeOffNum":"2",
              "realNameNum":"5555"
            },
            {
              "hfTime":"2021-01-14",
              "writeOffNum":"3",
              "realNameNum":"6666"
            }
          ],
          "children": [
            {
              "id": "10100",
              "name": "南昌市11",
              "saleNums":"444444",
              "grade":"4",
              "type": 1,
              "hxNums1": [
                {
                  "hfTime":"2021-01-02",
                  "writeOffNum":"1",
                  "realNameNum":"4"
                }
              ],
              "_loading": false,
              "children": []
            },
            {
              "id": "10100",
              "name": "抚州市222",
              "saleNums":"555555",
              "grade":"5",
              "hxNums1": [
                {
                  "hfTime":"2021-01-02",
                  "writeOffNum":"1",
                  "realNameNum":"99999"
                },
                {
                  "hfTime":"2021-01-03",
                  "writeOffNum":"3333",
                  "realNameNum":"5"
                }
              ],
              "_loading": false,
              "children": []
            }
          ]
        }
      ],
  1. 县及街道后端返回数据格式 
    "dateValue": [
        {
          "id": "888",
          "name": "南丰县",
          "province": "江西省",
          "city": "抚州市",
          "county": "南丰县",
          "type": "2",
          "hxNums1": [
            {
              "hfTime":"2021-01-02",
              "writeOffNum":"111",
              "realNameNum":"433"
            },
            {
              "hfTime":"2021-01-03",
              "writeOffNum":"255",
              "realNameNum":"577"
            },
            {
              "hfTime":"2021-01-14",
              "writeOffNum":"399",
              "realNameNum":"699"
            }
          ],
          "_loading": false,
          "children": [

          ]
        },
        {
          "id": "999",
          "name": "宜黄县",
          "type": "2",
          "hxNums1": [
            {
              "hfTime":"2021-01-02",
              "writeOffNum":"111",
              "realNameNum":"一晃"
            },
            {
              "hfTime":"2021-01-03",
              "writeOffNum":"255",
              "realNameNum":"宜黄11"
            },
            {
              "hfTime":"2021-01-14",
              "writeOffNum":"399",
              "realNameNum":"699"
            }
          ],
          "_loading": false,
          "children": [
            {
              "id": "10100",
              "name": "三叉三叉路口三叉三叉路口",
              "hxNums1": [
                {
                  "hfTime":"2021-01-02",
                  "writeOffNum":"1",
                  "realNameNum":"4"
                }
              ]
            },
            {
              "id": "10100",
              "name": "三叉三叉路口三叉三叉路长山路",
              "hxNums1": [
                {
                  "hfTime":"2021-01-02",
                  "writeOffNum":"1",
                  "realNameNum":"长山路11"
                },
                {
                  "hfTime":"2021-01-03",
                  "writeOffNum":"11",
                  "realNameNum":"5"
                }
              ]
            }
          ]
        }
      ],

℡仅此、而已
关注
专栏目录
Vue3 - Element Plus 树形表格组件 el-table 一键全部展开折叠功能，支持动态数据及懒加载点击父级才去请求的场景，Tree树状表格每行带有children的表格全部收起和折叠！
王佳斌
08-07 4100
vue3，element-plus，表格Table组件，el-table，怎样一键展开/收起，一键展开或折叠树形表格，如何通过按钮来实现全部展开，不生效，一键折叠或展开表格，表格children嵌套，带有子集，多级表格，懒加载，动态数据，table表格的children通过后端请求过来的怎么一键展开请求数据呢，表格如何一键展开和折叠，怎么使用，教程，树形数据table全部展开和折叠，一键展开或折叠树形表格，点击展开接口获取数据，toggleRowExpansion，树形表格懒加载与全部折叠，深层多级，复杂，
Vue.js iview实现树形权限表（可扩展表）
热门推荐
月想容的博客
04-12 3万+
问题： 需要一个可折叠的权限管理系统，用表格展示。 主要用的iView组件库，有Table（表格），Tree（树形控件），Collapse（折叠面板）看起来比较符合意思 深入查看Table相关范例，发现有个通过给columns数据设置一项，指定type: 'expand'，即可开启扩展功能 可以考虑 但也只是展开详细...
vue 表格树 固定表头
asm35548的博客
12-07 444
参考网上黄龙的表格树进行完善，并添加固定表头等的功能，目前是在iview的项目中实现，如果想在element中实现的话修改对应的元素标签及相关写法即可。 <!-- @events @on-row-click 单击行或者单击操作按钮方法 @on-selection-change 多选模式下 选中项变化时触发 ...
解决iview的Tree控件因数据量过多导致页面卡顿
最新发布
weixin_43541368的博客
07-22 947
将变量转换为非响应式数据，取消vue的复杂对象深层次递归导致的资源浪费
后端给你1W条数据,怎么保证前端在渲染的时候页面不会卡
qq_56392992的博客
04-24 5208
document.createDocumentFragment() 用来创建一个虚拟的节点对象，节点对象不属于文档树。 当需要添加多个DOM元素时，可以先把DOM添加到这个虚拟节点中。然后再统一将虚拟节点添加到页面，这会减少页面渲染DOM的次数。 window.requestAnimationFrame 接受参数为函数，比起setTimeout和setInterval有以下优点： 1.把每一帧中的所有DOM操作集中起来，在一次的重排/重绘中完成。每秒60帧。 2.在隐藏或者不可见的元素中，requestAn
vue+iview 树型表格
sophia_xiaoma的专栏
03-28 1万+
作者：https://javascript.ctolib.com/article/wiki/55707 gitHub：https://github.com/huanglong6828/vue-tree-grid 1，创建treeGrid.vue（将文件放入components中）, 其中树型表格的父元素图标不显示，我改了一下（改为ios-arrow-forward和ios-arrow-dow...
iview中如何解决下拉框数据太多，导致的页面卡，慢情况 （1）
qq_41572552的博客
04-02 2680
项目背景: 发送告警信息需要配置通知人，但由于通知人分类，又划分用户、用户组、及钉钉微信等通知方式，而用户下面人数过多，全部渲染导致页面奇卡，用户体验很差,原来采用Cascader做选择配置，后面发现数据太多，且iview的Cascader没有监控搜索数据变化的方法，所以采用两个下拉框。 我在网上搜了，很少有这种搞法的，但是现在碰到了，顶着头皮也得上不是吗。 我想了一下解决方法 1、截取部分数据渲染dom，将全量数据在前台做缓存 2、支持用户搜索，获取用户在输入下拉框中输入的数据，在全量数据中搜索过滤，搜
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
基于iView和he-tree-vue的一个拖拽树形组件
12-16
总的来说，基于iView和he-tree-vue的拖拽树形组件结合了两者的优势，提供了丰富的功能和高度的可定制性，是开发Vue.js应用时构建树形数据交互界面的理想选择。对于前端开发者来说，掌握这个组件的使用和扩展方法，能...
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
10-16
在介绍Vue Element-UI Table组件的动态生成表头和数据、修改单元格格式以及父子组件通信的过程中，涉及到了Vue框架的诸多核心知识点。以下将详细解释这些知识点。 首先，Vue是一种构建用户界面的渐进式框架。它的...
vue-table-with-tree-grid：用于Vue.js 2.0的表（带有tree-grid）组件。 （其样式扩展了@iView）
02-06
Vue.js 2.0的表格（带有树网格）组件。 （其样式扩展了 ） 例 安装 使用npm： npm i vue-table-with-tree-grid -S 或使用纱线： yarn add vue-table-with-tree-grid 用法 import Vue from 'vue' import ZkTable ...
iview treeTable 树状表格及一维数组转换为树结构json
weixin_44180427的博客
04-13 4662
需求做树状表格,在网上找到的某同学已经造好的轮子, 留下以备不时之需 iview 做的 treeTable 树状表格. 基于Iview做的treeTable; 另外,由于后台返回的并不是树结构 json, 而是 一维数组, 此处一并记录 const arrToTree = (data: any, parent: number) => { const tree = []; ...
vue项目iview插件中树形控件使用方法（如何渲染处理后台请求的数据）
loveqdm的博客
07-15 3096
iview中的树形控件与elment-ui中不同 官方文档中要渲染的标题是写死的，固定用的是title。而我们请求过来要渲染的数据大多都不是title属性名，除非让后台改过。所以需要我们自己处理。 数据处理代码是找的别人的： 有了处理代码后，我们要怎么在项目中使用呢？ 我选择在Vue上挂载这个方法 ，请求到后台数据后直接调用 this.方法名 即可得到处理后的数据。 首先，单独建立一个js文...
iview的Tree控件数据从后台获取数据展示
豆奶的博客
11-13 654
iview的Tree控件从后台获取数据进行展示
在vue项目中使用树形结构的穿梭框
黑白两客
04-12 2172
先看一下最后的效果： 一个基于elementui的穿梭框组件：el-tree-transfer 第一步：安装组件 npm install el-tree-transfer --save 第二步：写代码 // 使用树形穿梭框组件 <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @addBtn='add
iview table（多表头）导出以及原生table的js导出（跨行跨列）
xavier
06-25 3189
最近做的比较多的iview table的多表单渲染【后台返回动态多表头的culomns数据】， 1.采用jquery的table2excel.js 缺点：导出的文件会有提示问题 tableExport(tableId, name, ‘xlsx’) 2.iview table导出 先处理多表头的columns exportColumn = this.handleMultiTableHeader...
vue 实现树状穿梭框
qq_43806488的博客
07-27 2871
vue实现树状穿梭框。
vue+elementUI实现树形穿梭框
大兵的猫
03-20 3153
思路二：利用elementUI的filter API对选中节点进行筛选，左侧筛选出未选中的，右侧筛选出选中的，用的还是同一棵树，用一个属性来区分是否选择，好处是子节点选中，父节点会跟随保存，不用重新构建树结构。将左侧选中的节点移动到右侧，还要保持树结构，意味着移动子节点，需要把该子节点对应的父节点甚至父节点的父节点一并移到右侧形成一个新的树结构，树结构的层级和原来的树保持一致，只是右侧展示的子节点为选中的子节点，filter API用法。
iview树形组件后台数据转为对应treeData的字段
weixin_42776027的博客
02-18 4954
参考地址：https://segmentfault.com/q/1010000012064522/a-1020000012149722 function getTree(tree = []) { let arr = []; if (!!tree &amp;&amp; tree.length !== 0) { tree.forEach(i...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值