el-table中如何点击显示全部内容？

Question

项目中遇到一个需求，要求点击每一行的“显示更多”，将该行剩余的内容显示完整

我的实现思路：通过操作每一行的scope.row来控制每行的显示与否
我是这样写的：

<el-table
          border
          size="mini"
          :data="tableData"
          tooltip-effect="dark"
          class="table"
          height="100%"
          ref="table"
        >
        
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="time"  width="180" label="时间">
            <template slot-scope="scope">
              <div style="color:#0080ff">{{scope.row.time}}</div>
              <el-tooltip class="item" effect="dark" content="根据条件查询" placement="right">
                <span>上下文查询</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="content"  label="内容">
            <template slot-scope="scope">
              <div class="content" :class="{showMore:scope.row.show}">{{scope.row.content}}</div>
              <span @click="showMore(scope.row)" v-show="!scope.row.show" style="color:#0080ff;">显示更多...</span>
            </template>
          </el-table-column>
        </el-table>

关键在于第三个el-table-column里的showMore方法，该方法实现如下

showMore (row) {
  row.show = true
}

然而并没有生效，检查数据，修改已经生效，但并没有同步到视图上，想请教一下，我的写法哪里有问题？这种需求应该如何实现？

Answer 1

show应该不是你数据中自带的吧，或者说他原本是不存在的，你通过showMore设置后才存在。这样的数据需要用set设置才会更新视图

Vue.set(row, 'show', true)

Answer 2

我觉得直接修改tableData比较好 这样改的话vue监听数据不到

Answer 3

row.show这个属性是否有默认值？如果对象属性原来不存在通过showMore方法那样赋值vue是无法监听到变更的

Answer 4

提供一个思路：可以给该列td绑定一个class，这个class的样式是那种溢出显示省略号的那种，点击这一行的显示全部，就将这一行的那个td的样式给改了，包括“显示全文”和“收起”也可以这样来控制