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>

    //關(guān)鍵是table的@row-click方法，親測可用
      methods:{
        rowClick(row,index,e) {
            this.$refs.refTable.toggleRowExpansion(row)
        },
      }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容