<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
}
]
}
},