element ui 表格 点击某行折叠或展开 有数展示下拉图标

实现的效果是这样的

这是表格demo：



   <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;"

:row-class-name="getRowClassName"

@row-click="rowClick"

:row-key="rowKey" :expand-row-keys="nowExpand">


        <el-table-column type="expand">
          <template slot-scope="props" v-if="props.row.children">
            <el-form style="width: 100%;">
              <el-form-item>
                <el-table style="width: 100%;background: none" :data="props.row.children">
                  <el-table-column label="日期" prop="date" align="center">
                  </el-table-column>
                  <el-table-column label="姓名" prop="name" align="center">
                  </el-table-column>
                  <el-table-column label="地址" prop="address" align="center">
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary" plain>详情</el-button>
                      <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)" plain>录入</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
 
        <el-table-column prop="date" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center">
        </el-table-column>
 
      </el-table>




这是data中的数据：





data(){
return{
    //当前展开行
      nowExpand: [],//表格数据
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],}
}






这是方法：



  methods: {

//rowkey获取方式
    rowKey(row) {
      return row.id
    },

//点击该行就添加到显示数组中
    rowClick(row, event, column) {
      if (row.children != null) {
        let index = this.nowExpand.indexOf(row.id)
        if (index == -1) {
          this.nowExpand.push(row.id)
        } else {
          this.nowExpand.splice(index, 1)
        }
      }
    },

//设置没行的样式名称  是否显示下拉箭头
    getRowClassName({ row, rowIndex }) {//有children就显示箭头
      if (!row.children) {
        return 'row-expand-cover';
      } else {
        return 'row-expand-show'
      }
    },
 
 
 
  },






style中的内容：



  <style lang="scss">
.row-expand-cover .el-table__expand-icon {
  visibility: hidden;
  display: none;
}
.row-expand-show .el-table__cell {
  &:nth-child(2) .el-table__expand-icon {
    visibility: hidden;
    display: none;
  }
}
</style>

https://blog.csdn.net/qq_46027468/article/details/127213682