ElementUI 遍历、elementui list

解决方案简述

在使用ElementUI时，我们经常会遇到需要遍历列表并进行渲染的情况。例如展示一系列商品信息、用户列表等。为了高效地完成这些任务，我们可以借助Vue.js的v-for指令来遍历数据，并结合ElementUI的组件（如el-list、el-card等）进行展示。对于复杂的数据处理和样式需求，可以采用多种思路实现。

一、基础遍历渲染

这是最常见的方式。准备好要遍历的数据源，然后通过v-for将其与ElementUI组件相结合。
```html

价格：{{ item.price }}

库存：{{ item.stock }}

export default {
data() {
return {
productList: [
{ name: '商品1', price: 100, stock: 50 },
{ name: '商品2', price: 200, stock: 30 },
{ name: '商品3', price: 150, stock: 40 }
]
};
}
};

</p>

<h2><h2>二、添加交互效果</h2></h2>

<p>如果想要给列表项添加一些交互效果，比如点击查看详情或者加入购物车等操作。
```html

  <div>



          <div class="clearfix">
            <span>{{ item.name }}</span>
          </div>
          <div>
            <p>价格：{{ item.price }}</p>
            <p>库存：{{ item.stock }}</p>
            加入购物车
          </div>



  </div>
</p>


export default {
  data() {
    return {
      productList: [
        { name: '商品1', price: 100, stock: 50 },
        { name: '商品2', price: 200, stock: 30 },
        { name: '商品3', price: 150, stock: 40 }
      ]
    };
  },
  methods: {
    showDetail(item) {
      console.log('查看' + item.name + '详情');
    },
    addToCart(item) {
      console.log('将' + item.name + '加入购物车');
    }
  }
};


<p>

三、分页显示

当数据量较大时，直接全部渲染可能会导致页面卡顿。这时可以采用分页的形式来展示。
```html

价格：{{ item.price }}

库存：{{ item.stock }}

export default {
data() {
return {
productList: [
// 这里有更多的商品数据
],
total: 0,
pageSize: 8,
currentPage: 1
};
},
computed: {
currentPageData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.productList.slice(start, end);
}
},
created() {
this.total = this.productList.length;
},
methods: {
handleCurrentChange(val) {
this.currentPage = val;
}
}
};