Element表格中row-class-name的使用

注意：目的是为实现表格展开收起的显示

代码入下：

1.html部分代码

<el-table :data="ruleForm.approvalAssignRecordVoList"  ref="tab1" :row-key="(row)=>{return row.assignRecordId}"  :row-class-name="setClassName" border style="width:90%">

                <el-table-column type="expand">

                  <template slot-scope="props">

                    <el-form label-position="left" inline class="demo-table-expand">

                      <el-form-item label="内容摘要:">

                        <span style="line-height:40px">{{ props.row.recordContent }}</span>

                      </el-form-item>

                      <el-form-item label="办理人:">

                        <span style="line-height:40px">{{ props.row.recordUserName }}</span>

                      </el-form-item>

                      <el-form-item label="职务:">

                        <span style="line-height:40px">{{ props.row.recordUserPhone }}</span>

                      </el-form-item>

                      <el-form-item label="联系方式:">

                        <span style="line-height:40px">{{ props.row.recordUserPost }}</span>

                      </el-form-item>

                    </el-form>

                  </template>

                </el-table-column>

                <el-table-column prop="assignOperationDate" label="操作日期" width="180">

                </el-table-column>

                <el-table-column prop="deptName" label="单位" width="180">

                </el-table-column>

</el-table>

2、js部分代码：

setClassName({ row, index }) {

//只有反馈状态下可以展开状态2是我要实现的效果，可以根据需求自行修改，expend添加的对应类名

      return row.assignOperationType != 2 ? 'expand' : '';

    },

3.css部分代码

.expand .el-table__expand-column .cell {

  display: none;

}