折叠面板

<div class="table-container" v-for="(item, index) in positionList" :key="index">
  <div class="table-header" :class="!item.flag ? 'header_close': 'header_open'">
    <div class="job-position">{{item.name}}</div>
    <div class="job-list">
      <span class="job-list-item"><i class="el-icon-location"></i>广州</span>
      <span>|</span>
      <span class="job-list-item">{{item.education}}</span>
      <span class="job-list-item">{{item.major}}</span> -->
      <span class="arrow-close" @click="openDetail(index, item.flag)" v-if="item.flag">
        <i class="el-icon-arrow-down"></i>
      </span>
     <span class="arrow-close" @click="openDetail(index, item.flag)" v-else><i class="el-icon-arrow-right"></i></span>
            </div>
          </div>
          <div class="job-content" :class="item.flag ? 'selected_open': 'selected_close'">
            <div class="major-container">
              <div class="major-title">专业要求</div>
              <div class="major-content">{{item.major}}</div>
            </div>
            <div class="responsibilities-container">
              <div class="major-title">职责描述</div>
              <div class="major-content">{{item.job_responsibilities}}</div>
            </div>
            <div class="requirements-container">
              <div class="requirements-title">任职要求</div>
              <div class="major-content">{{item.job_requirements}}</div>
            </div>
          </div>
        </div>
       

 openDetail (index, flag) {
     this.selected = index
     this.positionList[index].flag = !this.positionList[index].flag
    }

.hiring-table {
  width: 41.25vw;
  margin: 0 auto;
  margin-bottom: 4vw;

}
.table-container {
  width: 100%;
  background: #fff;
  margin-bottom: 0.52vw;
  
}
.table-header {
  height: 3.645vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.25vw;
  user-select: none;
}
.job-position {
  font-size: 1.145vw;
  color: #333;
  font-weight: 500;
}
.job-list {
  font-size: 0.833vw;
  color: #ADADAD;
}
.job-list-item {
  margin-right: .2vw;
}
.arrow-close {
  display: inline-block;
  width: 0.9vw;
  height: 0.9vw;
  line-height: 0.98vw;
  margin-left: 1vw;
  /* border: 1px solid #ADADAD; */
  /* border-radius: 50px; */
  text-align: center;
  cursor: pointer;
}
.job-content {
  padding: 0.3vw 1.25vw 1.2vw;
  display: none;
  font-size: 0.73vw;
  color: #666;
  user-select: none;
}
.major-title, .requirements-title {
  font-size: 0.833vw;
  color: #333;
  font-weight: 500;
}
.major-content {
  padding-top: 0.6vw;
  line-height: 1.145vw;
}
.responsibilities-container, .requirements-container {
  margin-top: 1.98vw;
}
.selected_open {
  display: block;
}
.el-icon-arrow-right, .el-icon-arrow-down {
  font-size: 1vw;
}
.mobile_contact {
  display: none;
}