<div class="frieght-list">
    <ul>
      <li v-for="(item, index) in freightList" :key="item">
         <div class="list-item">
             <div class="list-header" @click="show_detail(index)">
                 <div>{{item.expressName}}</div>
                 <div class="operate-list">
                 <span class="lastEdit-time">最后编辑时间：{{item.lastEditTime}}</span>
                 <el-button type="text">修改</el-button>
                 <el-button type="text">删除</el-button>
            	<div class="triggle-down"></div>
         	</div>
		</div>
         <div v-if="item.isShow">
             <table class="zent-grid-table">
                    <thead class="zent-grid-thead">
                          <tr>
                          	<th>可配送区域</th>
	                        <th>首件(个)</th>
                            <th>运费(元)</th>
                            <th>续件(个)</th>
                            <th>续费(元)</th>
                           </tr>
                           <tr v-for="(item1, index) in item.freightDetail" :key="item1">
                             <td>{{item1.area}}</td>
                             <td>{{item1.num}}</td>
                             <td>{{item1.expressFee}}</td>
                             <td>{{item1.nums}}</td>
                             <td>{{item1.expressFees}}</td>
                           </tr>
                	 </thead>
           		</table>
           	 </div>
      	  </div>
   	  </li>
   </ul>
</div>

methods: {
        show_detail(index) {
            console.log(index)
            var that = this
            var listData = that.freightList 
            var isShow = that.freightList[index].isShow // 先用一个变量接收一个原来的状态值
            listData[index].isShow = !isShow
            that.freightList = listData
        }
}

.tab-content {
        padding: 40px 20px;
        .frieght-list {
            .list-item {
                .list-header {
                    background: #F7F8FA;
                    height: 52px;
                    line-height: 52px;
                    padding: 0 18px;
                    width: calc(100vw - 280px);
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    border: 1px solid #ebedf0;
                    margin: 0 -1px -1px 0;
                    cursor: pointer;
                    .operate-list {
                        width: 275px;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        .lastEdit-time {
                            font-size: 14px;
                            color: #999;
                        }
                        .triggle-down {
                            width: 6px;
                            height: 6px;
                            border-top: 1px solid #4F4F4F;
                            border-right: 1px solid #4F4F4F;
                            margin-top: 21px;
                            transform: rotate(135deg);
                        }
                    }
                }
                .zent-grid-table {
                    width: 100%;
                    text-align: left;
                    border-collapse: collapse;
                    border-spacing: 0;
                    .zent-grid-thead {
                        width: 100%;
                        tr {
                            display: table-row;
                            background-color: var(--theme-stroke-9,#fff);
                            height: 56px;
                            line-height: 56px;
                            color: var(--theme-stroke-1,#323233);
                            border-bottom: 1px solid #ebedf0;
                            border-bottom-color: var(--theme-stroke-6,#ebedf0);
                            &:last-child {
                                border-bottom: none;
                            }
                            th {
                                font-size: 14px;
                                display: table-cell;
                                box-sizing: border-box;
                                border-bottom: 1px solid #ebedf0;
                                border-bottom-color: var(--theme-stroke-6,#ebedf0);
                                vertical-align: middle;
                                text-align: right;
                                &:first-child {
                                    text-align: left;
                                    padding-left: 18px;
                                    width: 60%;
                                }
                                &:last-child {
                                    padding-right: 18px;
                                }
                            }
                            td {
                                padding: 0 18px;
                                text-align: right;
                                &:first-child {
                                    text-align: left;
                                }
                            }
                        }
                    }
                }   
            }
        }
    }

data() {
        return {
            freightList: [
                { 
                    expressName: "测试", 
                    lastEditTime: "2020-12-28", 
                    freightDetail: [
                        { area: "辽宁省,吉林省,黑龙江省", num: 2, expressFee: 12.00, nums: 1, expressFees: 6.00 },
                        { area: "吉林省,黑龙江省", num: 5, expressFee: 22.00, nums: 2, expressFees: 12.00 },
                        { area: "辽宁省,吉林省", num: 8, expressFee: 32.00, nums: 4, expressFees: 18.00 }
                    ],
                    isShow: false
                },
                { 
                    expressName: "圆通", 
                    lastEditTime: "2020-12-27", 
                    freightDetail: [
                        { area: "吉林省,黑龙江省", num: 2, expressFee: 12.00, nums: 1, expressFees: 6.00 },
                        { area: "吉林省,黑龙江省", num: 8, expressFee: 32.00, nums: 4, expressFees: 18.00 }
                    ],
                    isShow: false
                },
                { 
                    expressName: "顺丰", 
                    lastEditTime: "2020-12-26", 
                    freightDetail: [
                        { area: "黑龙江省", num: 5, expressFee: 22.00, nums: 2, expressFees: 12.00 }
                    ],
                    isShow: false
                }
            ]
        }
    },