el-table展开行隐藏原本ui样式，并将展开事件放在btn按钮上

一、需求：

1、目前的样式，需求为点击 ‘查看’ 展开table行

2、目标样式：

二、实现方式

1-1、首先我们看到官方的样式长这个样子。1-2、不想要左侧的三角，想把它变成按钮就需要在样式上进行操作，直接上代码，第一步：width设置为0

<el-table-column type="expand" width="0">
    <template slot-scope="props">
        <div class="chakan">
            <p class="chakantitle">{{dialogtitle}}</p>
            <div class="chakanBox">
                <pre>{{newLog}}</pre>
            </div>
        </div>
    </template>
</el-table-column>

 1-3、第二步：直接复制粘贴官方的代码  然后将新增的代码加上就可以隐藏了

.demo-table-expand {
    font-size: 0;
 }
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
 }
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
 }
/*此处为新增CSS，在vue中使用要加/deep/*/
/deep/ .el-table__expand-icon{
    visibility: hidden;
}

2、新增按钮，并添加方法，点击展开或关闭，主要看图上的红框处的代码（我是接手别人项目代码，行内样式不是我写的哈~大佬别误会）

 

<el-table highlight-current-row size="small" v-loading="logLoading" :data="logTableData" style="width: 100%"
        row-key="id" :expand-row-keys="expands">
        <el-table-column type="expand" width="0">
          <template slot-scope="props">
            <div class="chakan">
              <p class="chakantitle">{{dialogtitle}}</p>
              <div class="chakanBox">
                <pre>{{newLog}}</pre>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="任务名称" align="center" prop="name" show-overflow-tooltip />
        <el-table-column label="组件类型" :formatter="translateType" align="center" prop="taskType" show-overflow-tooltip />
        <el-table-column label="开始时间" align="center" :formatter="translateDate" prop="startTime"
          show-overflow-tooltip />
        <el-table-column label="结束时间" align="center" :formatter="translateDate" prop="endTime" show-overflow-tooltip />
        <el-table-column label="所用时间" align="center" prop="duration" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.duration == '0' ? '' : scope.row.duration + 's' }}</template>
        </el-table-column>
        <el-table-column label="状态" :formatter="translateState" align="center" prop="state" show-overflow-tooltip />

        <el-table-column align="center" label="详情">
          <template slot-scope="scope">
            <!-- @click="handleDetail(scope.$index, scope.row)" -->
            <span @click="expandRow(scope.$index,scope.row)"
              style="height: 23px; font-size: 12px !important; color: #29a5ff; cursor: pointer" size="mini">查看</span>
          </template>
        </el-table-column>
      </el-table>

3、然后新增一个expandRow()方法

expandRow(index, row) {  //这里的参数是我自己用来传参的，先试效果的话可以先不带参数
        if (this.expands.indexOf(row.id) < 0) {
          this.expands = [];
          this.expands.push(row.id);
          this.handleDetail(index, row)
        } else {
          this.expands = [];
        }
      },

4、并在data中新增一个expands数组变量