修改el-table-column type=“expand“展开行触发点-更多按钮触发

默认展开点

修改el-table-column type=“expand“展开行触发点-更多按钮触发_第1张图片

目标展开点

修改el-table-column type=“expand“展开行触发点-更多按钮触发_第2张图片

解决代码:

html部分:

				
					
						
					
					
						
					


					
						
					
				

js-data部分:

		expands: [],
		getRowKeys(row) {
			return row.id;
		}

js-method部分:

		handleExpandChange(row, expandedRows) {

			var index=that.expands.indexOf(row);
			if(index!=-1){
				that.expands.splice(index,1);
			}else{
				that.expands = [];
				that.expands.push(row);
			}

		},
		clickExpandMore(row){
			that.handleExpandChange(row);
		},

关键点属性::expand-row-keys="expands"  ,    :row-key="getRowKeys"

实现:默认显示字段内前5个信息,点击更多按钮,展开全部字段信息

效果图:

修改el-table-column type=“expand“展开行触发点-更多按钮触发_第3张图片

你可能感兴趣的:(element-ui,vue)