<div class="list-wrapper">
<div class="content-header">
<div class="columns-content" v-for="(i, k) in columns" :key="k" :style="'width:' + i.width + 'px'">{{ i.label }}
</div>
<div class="columns-content">操作</div>
</div>
<ul class="content-ul">
<li v-for="(item, index) in fenceList" :key="index">
<!-- 序号 -->
<div class="columns-content nowrap" :title="index + 1" style="width: 30px;">{{ index + 1 }}</div>
<!-- 围栏名称 -->
<div class="columns-content nowrap" :title="item['fenceName']" style="width: 120px;">{{ item['fenceName'] }}
</div>
<!-- 操作 -->
<div class="columns-content">
<span class="btn" v-show="item.status !== 1" @click="handleDelete(item.id)" style="color: #ED3939">删除</span>
</div>
</li>
</ul>
</div>
.list-wrapper {
height: calc(100% - 98px);
}
.content-header {
height: 42px;
line-height: 42px;
background: rgba(34, 93, 176, 0.2);
font-size: 14px;
color: #B4C7DD;
text-align: left;
padding: 0 10px;
}
.content-header>.columns-content {
text-align: left;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.content-ul {
list-style: none;
height: calc(100% - 53px);
overflow: auto;
}
.content-ul>li {
text-align: left;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
padding: 10px 10px;
display: flex;
align-items: center;
}
.content-ul>li:nth-child(even) {
background: rgba(22, 119, 255, 0.1);
}
.content-ul>li:hover {
background: rgba(35, 127, 255, 0.38);
}
.content-ul>li>.columns-content {
display: inline-block;
text-align: center;
}
.content-ul>li>.columns-content.nowrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}