美文网首页
Element UI 表格点击整行展开行显示

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

作者: 嘤夏影 | 来源:发表于2019-04-29 14:18 被阅读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)
        },
      }

相关文章

网友评论

      本文标题:Element UI 表格点击整行展开行显示

      本文链接:https://www.haomeiwen.com/subject/zeeynqtx.html