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

2019-04-29  本文已影响0人  嘤夏影
      <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)
        },
      }
上一篇 下一篇

猜你喜欢

热点阅读