Element UI 表格点击整行展开行显示

      <el-table
          ref="refTable"
          @row-click="rowClick"
          @expand-change="expandChange"
          :data="list"
          :show-header="false"
          :cell-style="rowstyle"
          style="width: 100%">
          <el-table-column
            prop="content"
            width="600">
            <template slot-scope="scope">
              <el-badge is-dot class="item" v-if="scope.row.isRead == 1"></el-badge>
              <span>{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="accountName">
          </el-table-column>
          <el-table-column
             width="200"
            prop="createTime">
          </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="props">
                  <span v-html="props.row.content"></span>
            </template>
          </el-table-column>
        </el-table>

    //关键是table的@row-click方法,亲测可用
      methods:{
        rowClick(row,index,e) {
            this.$refs.refTable.toggleRowExpansion(row)
        },
      }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容