vue 不分页列表table展示

vue 不分页列表table展示_不想学习只想玩的博客-CSDN博客

    <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;
  /* margin-right: 4px; */
  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;
}