vue+element ui左侧两列固定,其余列不固定,最左侧固定列可展开,除左侧固定列内容外,其余数据非零可点击展示详情页。
之前没做过这种,记录一下。
<template>
<section >
<div>
<template>
<!--0.点击展开详见element ui官网-->
<!--当row中包含children字段时,被视为树型数据。渲染树型数据时,必须要指定row-key。children可以通过tree-props配置。-->
<el-table :data="tableData" row-key="id" :tree-props="{children:'children'}">
<!--1.固定列1-->
<el-table-column label="固定列1" prop="" >
<!--1.1由于固定列是可以点击展开的,会显示可下拉的数据,以及下拉之后显示的数据。在这里使用template-->
<template slot-scope="scope">
<!--1.2使用v-if以及v-else-if来进行判断是否有下拉的数据-->
<span v-if="scope.column.label=='固定列1'&&scope.row.children!=null">{
{
利用scope显示相关信息}}</span>
<span v-else-if="scope.column.label=='固定列1'&&scope.row.children==null">{
{
利用scope显示相关信息}}<