element-ui el-table表格展开行 并且默认展开一行

element-ui el-table表格展开行 并且默认展开一行

效果图：

<el-table
          ref="table"
          :data="tablesData"
          style="width: 100%"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#000000',
            borderRight: '1px solid #fff'
          }"
          :height="tableHeight"
          :row-key="getRowKeys"
          :expand-row-keys="expands"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item
                  :label="'同住人' + (index + 1)"
                  v-for="(item, index) in scope.row.mate_list"
                  :key="index"
                >
                  <span class="expand-text">{{ item.name }}</span>
                  <span class="expand-text">{{ sexType[item.gender] }}</span>
                  <span class="expand-text">{{ item.id_no }}</span>
                  <span class="expand-text">{{ item.phone_number }}</span>
                  <span>{{ item.relationship }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="#" width="55" align="center">
            <template slot-scope="scope">
              <span v-text="getIndex(scope.$index)"></span>
            </template>
          </el-table-column>
          <el-table-column label="承租人">
            <template slot-scope="scope">
              <span
                v-html="showDate(scope.row.name)"
                v-if="scope.row.name"
              ></span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证号码" min-width="110">
            <template slot-scope="scope">
              {{ scope.row.id_no }}
            </template>
          </el-table-column>
          <el-table-column label="电话号码">
            <template slot-scope="scope">
              <span>{{ scope.row.phone_number }}</span>
            </template>
          </el-table-column>
        </el-table>

		data() {
    return {
      dataList: [],
      
      getRowKeys(row) {
        return row.id
      },
      
      // 要展开的行，数值的元素是row的key值
      expands: []
    }
   },
    mounted() {
	    // 放入默认展开行
	    this.expands.push(this.dataList[0].id)
  },