Element-UI 展开行table，如何在某些特殊条件下呈现展开行格式

Question

设置type="expand"后每行都有展开按钮，都可展开，需求是只有某些特殊条件下，这一行才可以展开，其他行没有展开按钮不可展开，如图。求解决办法。。。。

Answer 1

我找到了一个偏方:

1. 用 row-class-name 给不需要展开的行添加一个类

2. 给这个类的所在行的expand这一列设置visibility:hidden样式,

大体代码如下:

<template>

  <el-table :data=tabledata :row-class-name="getRowClass">

    ...

  </el-table>

<template>

<script>

// ...

methods: {

  getRowClass: function (row, index) {

    if(row.canExpand)

      return ''

    else

      return 'hide-expand'

  }

}

// ...

</script>

<style>

/*

.hide-expand{

  visibility:hidden

}

*/

/*CSS 修正*/

.hide-expand .el-table__expand-column .el-icon {

  visibility: hidden;

}

</style>