iview-admin table自定义expand组件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35258268/article/details/84848434

本文介绍了一种优化iView Admin表格组件展开行的方法，通过将展开项数据加入tabledata数组，简化了样式修改过程。文章详细解释了如何通过标记行状态和使用渲染函数实现行的展开与隐藏，以及如何通过API调用动态加载展开项数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于iview-admin自带的table-expand组件是在table 行下面加了一个table，如果展开项需要和上级table展示列内容一致，则需要进行繁琐的样式修改。现可将展开项的data加在table data数组内，也可进行加载展开项list
在这里插入图片描述

在这里插入图片描述

点击展开当前行时，标记当前行状态，是否展开，在render行数中进行判断

{
        	title: '项目名',
        	key:'jobName',
        	width:150,
    			align: 'left',
	        render: (h, params) => {
	        		let jobName = params.row.jobName
	        		let isExpand = params.row.isExpand
	        		let isDown = params.row.isDown
	        		let iconType = !isDown ? 'ios-arrow-forward' : 'ios-arrow-down'
	        		if(!isExpand){
		            return h('div',{style:{cursor: 'pointer'}},[
					            	h('Icon',{props:{type:iconType},style:{marginRight:'5px'},on:{click: (e) => {e.stopPropagation();this.expandRow(params)}}}),
					            		h('span',jobName)
		            			])
	        		}else{
	        			return h('div', {style:{marginLeft:'25px'}},jobName)
	        		}
	        }
        }

2.展开方法

expandRow(params){
			//判断当前行是否展开，如果未展开，执行以下方法，先展开再请求接口加载到tabledata中当前data index 后
	if(!this.tableData[params.index].isDown){
		getRecordData().then(res => {
			return res.data
	      }).then( data => {
	      	this.tableData[params.index].isDown = true
	      	let newArrayData = data
	      	this.tableData[params.index].totals = newArrayData.length //将展开操作查询到的数据总条数加到当前行数据的totals上
	      	newArrayData.map( item =>{
      			item.isExpand = true
	        	item.upLevelIndex = params.index
	      	})
		newArrayData.map( (value, key) =>{
			this.tableData.splice(params.index + key + 1, 0, value)
		})
	      })
			}else{//如果当前行已展开，则隐藏
				this.tableData[params.index].isDown = false
				this.tableData.splice(params.index + 1, params.row.totals)
			}
		}