elementui中type="expand"类型的表格只打开一条数据下的子表

类似这种类型的，通过点击这个小图标来展开下一层表格，这个小图标相当于一个按钮，控制下级表格的显示隐藏。
代码：

<el-table
    :height="tabHeight"
    border highlight-current-row :data="data1"
    :row-key='getRowKeys'
    :expand-row-keys="expands"
    @expand-change="expandChange">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table
          ref="singleTableTitle"
         :data="data5"
          border
          height="150"
          style="width: 100%" @row-click="getClickRow">
          <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
          <el-table-column label="随便写的" :show-overflow-tooltip="true" prop="haha" wmin-idth="90"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column type="index" align="center" width="70" label="序号"></el-table-column>
    <el-table-column
      label="父级表"
      min-width="120"
      prop="insuranceNo">
    </el-table-column>
    <el-table-column label="操作" min-width="180" fixed="right" type="noFilter">
      <template slot-scope="scope">
        <el-button icon="el-icon-plus" type="primary" :disabled="scope.row.validflag === '0'" size="small" @click="hand(scope.row)">如果不想要图标，想要按钮控制</el-button>
      </template>
    </el-table-column>
  </el-table>

@expand-change="expandChange"此方法是子表显示与隐藏时触发的事件
:row-key=‘getRowKeys’
:expand-row-keys=“expands”
搭配这两个一起使用

在data () {
return {
}
}中

data () {
	return {
		data1: [],
		data5: [],
		expands: [],
      	getRowKeys (row) {
        	return row.id
      	} 
	}
}

methods中：

// 用按钮控制显示隐藏
hand (row) {
   let _this = this
   _this.expands = []
   row.showflag = !row.showflag
   if (row.showflag) {
     _this.expands.push(row.id)
     _this.data1.forEach(item => {
       item.showflag = false
     })
     row.showflag = true
   } else if (!row.showflag) {
     _this.expands = []
   }
 },
 // hand方法是用按钮控制显示隐藏
 // expandChange方法当前用小图标控制显隐
expandChange (row, expandedRows) {
	let _this = this
	if (expandedRows.length) {
        _this.expands = []
        if (row) {
          _this.expands.push(row.id)
        }
      } else {
        _this.expands = []
      }
      _this.axios.get('接口', params('参数')).then(function (response) {
        if (response) {
          _this.data5 = response.data.list
        }
      }).catch(function () {
      });
    },
}

这就完成了只显示一条数据，但是我想优化下当某条数据打开时才发送请求获取子表数据，关闭时不发送请求获取数据，那就加个判断，如果_this.expands.length > 0时，就证明打开了一条数据的子列表，则：

expandChange (row, expandedRows) {
	let _this = this
	if (expandedRows.length) {
        _this.expands = []
        if (row) {
          _this.expands.push(row.id)
        }
      } else {
        _this.expands = []
      }
      if (_this.expands.length > 0) {
      	// 数组长度大于0时则是打开状态，为空（长度为0）是关闭状态
      	_this.axios.get('接口', params('参数')).then(function (response) {
	        if (response) {
	          _this.data5 = response.data.list
	        }
	      }).catch(function () {
	      });
      }
    },
}

如果只想用图标控制，保留expandChange方法，去掉红框内按钮代码，以及hand方法即可

如果只想要按钮控制，保留hand方法，把expandChange方法中的发送请求的代码块复制到hand方法中即可。
就这样不改保留两个方法也没毛病。
2.如果打开多条数据的子表又不受影响时：（只能动态设置data5的值）
代码：

<el-table
    :height="tabHeight"
    border highlight-current-row :data="data1"
    :row-key='getRowKeys'
    :expand-row-keys="expands"
    @expand-change="expandChange">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table
          ref="singleTableTitle"
         :data="props.row.price"
          border
          height="150"
          style="width: 100%" @row-click="getClickRow">
          <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
          <el-table-column label="随便写的" :show-overflow-tooltip="true" prop="haha" wmin-idth="90"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column type="index" align="center" width="70" label="序号"></el-table-column>
    <el-table-column
      label="父级表"
      min-width="120"
      prop="insuranceNo">
    </el-table-column>
    <el-table-column label="操作" min-width="180" fixed="right" type="noFilter">
      <template slot-scope="scope">
        <el-button icon="el-icon-plus" type="primary" :disabled="scope.row.validflag === '0'" size="small" @click="hand(scope.row)">如果不想要图标，想要按钮控制</el-button>
      </template>
    </el-table-column>
  </el-table>

把子表之前放:data=data5的地方替换成props.row.price，变成动态的数组
在methods方法中：
把原来的data5 = resposne.data.list动态赋值

// 用按钮控制显示隐藏
hand (row) {
   let _this = this
   _this.expands = []
   row.showflag = !row.showflag
   if (row.showflag) {
     _this.expands.push(row.id)
     _this.data1.forEach(item => {
       item.showflag = false
     })
     row.showflag = true
   } else if (!row.showflag) {
     _this.expands = []
   }
 },
expandChange (row, expandedRows) {
	let _this = this
	if (expandedRows.length) {
        _this.expands = []
        if (row) {
          _this.expands.push(row.id)
        }
      } else {
        _this.expands = []
      }
      _this.axios.get('接口', params('参数')).then(function (response) {
        if (response) {
          row.price = response.data.list
          // 获取到值直接赋值给那条数组中存放子数组的属性
        }
      }).catch(function () {
      });
    },
}

如果要用按钮显示就给父级数组每项一个状态，默认为false

这样就不会导致两个表格的数据替换成一样的啦。
完美啦~~学到了东西，记录一下，开心。