element-plus表格渲染数据（多选框+分页）（一）

前端煎饼

已于 2024-01-16 02:00:38 修改

阅读量1.1k

点赞数 21

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

于 2024-01-15 23:57:48 首次发布

本文链接：https://blog.csdn.net/weixin_55253195/article/details/135613436

本文介绍了如何使用Element-Plus库中的el-table组件实现表格渲染，包括添加多选框、设置列宽和对齐，以及如何绑定静态数据和使用自定义列模板。作者还展示了如何处理单元格内的计算和添加确认删除操作的气泡提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hi,大家好，今天分享做需求经常用到的组合，element-plus表格渲染数据（多选框+分页），记录一下，直入主题：

首先：搭建表格页面，参考element-plus官网：

我把许多代码的作用都写在注释上了，大家自行看吧。

<script setup>

</script>

<template>
    <div class="constainer">
        <div class="content">
    <el-table 
      >
      <!-- 实现多选非常简单: 手动添加一个 el-table-column，设 type 属性为 selection 即可 -->
        <el-table-column type="selection" width="70" align="center"/>
        <!-- width和align我这里直接写标签上了，一个是宽度，一个是居中显示 -->
        <el-table-column prop="" label="商品" width="270" align="center">
        </el-table-column>
        <el-table-column prop="s_goods.price" label="单价" width="120" align="center">
        </el-table-column>
        <el-table-column prop="num" label="数量" align="center" width="140">
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
        </el-table-column>
        <el-table-column prop="" label="操作" width="180" align="center">     
        </el-table-column>
      </el-table>
  </div>
    </div>
  
</template>

<style lang='scss' scoped>
.constainer{
    width: 100vw;//宽等于屏幕的宽
    height: 100vh;//高等于屏幕的高
    background-color: #ccc;
    padding-top: 50px;
}
.content{
    width: 900px;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}
</style>

效果（样式大家自由发挥）：

往下：我们定义表格的数据，有后端接口的就用自己后端的数据，我这里暂时没有合适的接口，就先用静态数据代替

<script setup>


//我这里没有合适的接口，暂用tableData来代替,有后端接口返回的数据，拿返回的数据替换掉这个tableData
//在el-table用:data="tableData"就能将数据绑定在表格上，通过prop="属性名"来绑定每一列数据
const tableData = [
  {
    goodsDetail: {
        goodsImg:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
        goodsName:'商品名称',
        goodsDesc:'商品详情',
    },
    goodsPrice: 188,
    goodsNum: 3,
  },
  {
    goodsDetail: {
        goodsImg:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
        goodsName:'商品名称',
        goodsDesc:'商品详情',
    },
    goodsPrice: 188,
    goodsNum: 3,
  },
  {
    goodsDetail: {
        goodsImg:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
        goodsName:'商品名称',
        goodsDesc:'商品详情',
    },
    goodsPrice: 188,
    goodsNum: 3,
  },
  {
    goodsDetail: {
        goodsImg:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
        goodsName:'商品名称',
        goodsDesc:'商品详情',
    },
    goodsPrice: 188,
    goodsNum: 3,
  },
  {
    goodsDetail: {
        goodsImg:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
        goodsName:'商品名称',
        goodsDesc:'商品详情',
    },
    goodsPrice: 188,
    goodsNum: 3,
  },
]
</script>

<template>
    <div class="constainer">
        <div class="content">
            <!-- :row-style="{ height: '110px' }设置每行的高度 -->
            <!-- :data="tableData" -->
    <el-table
    :row-style="{ height: '110px' }" 
    :data="tableData"
      >
        <el-table-column type="selection" width="70" align="center"/>
        <el-table-column label="商品" width="270" align="center">
        </el-table-column>
        <!-- prop="属性名"来绑定每一列数据 -->
        <el-table-column prop="goodsPrice" label="单价" width="120" align="center">
        </el-table-column>
        <el-table-column prop="goodsNum" label="数量" align="center" width="140">
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
        </el-table-column>
        <el-table-column prop="" label="操作" width="180" align="center">     
        </el-table-column>
      </el-table>
  </div>
    </div>
  
</template>

<style lang='scss' scoped>
.constainer{
    width: 100vw;//宽等于屏幕的宽
    height: 100vh;//高等于屏幕的高
    background-color: #ccc;
    padding-top: 50px;
}
.content{
    width: 900px;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}
</style>

效果：

往下：我们使用自定义列模板来定义不能直接用特殊的列值，样式仅供参考

<script setup>
//我这里没有合适的接口，暂用tableData来代替,有后端接口返回的数据，拿返回的数据替换掉这个tableData
//在el-table用:data="tableData"就能将数据绑定在表格上，通过prop="属性名"来绑定每一列数据
const tableData = [
  {
    goodsDetail: {
      goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      goodsName: '商品名称',
      goodsDesc: '商品详情'
    },
    goodsPrice: 188,
    goodsNum: 3
  },
  {
    goodsDetail: {
      goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      goodsName: '商品名称',
      goodsDesc: '商品详情'
    },
    goodsPrice: 188,
    goodsNum: 3
  },
  {
    goodsDetail: {
      goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      goodsName: '商品名称',
      goodsDesc: '商品详情'
    },
    goodsPrice: 188,
    goodsNum: 3
  },
  {
    goodsDetail: {
      goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      goodsName: '商品名称',
      goodsDesc: '商品详情'
    },
    goodsPrice: 188,
    goodsNum: 3
  },
  {
    goodsDetail: {
      goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      goodsName: '商品名称',
      goodsDesc: '商品详情'
    },
    goodsPrice: 188,
    goodsNum: 3
  }
]
</script>

<template>
  <div class="constainer">
    <div class="content">
      <el-table :row-style="{ height: '110px' }" :data="tableData">
        <el-table-column type="selection" width="70" align="center" />
        <el-table-column label="商品" width="270" align="center">
          <!-- 通过 slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
          <!-- scope.row获取每一行列表的全部数据，可以自己打印出来看看 -->
         <!-- 自定义列表就是在列表项下面加一个template,绑定scope可以帮助我们获取一整行的数据 -->
          <template v-slot="scope">
            <!-- {{ scope.row }} -->
            <div class="goods-info">
              <img :src="scope.row.goodsDetail.goodsImg" alt="" class="cart-img" />
              <div>
                <p>{{ scope.row.goodsDetail.goodsName }}</p>
                <p class="desc">
                  {{ scope.row.goodsDetail.goodsDesc }}
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- prop="属性名"来绑定每一列数据 -->
        <el-table-column prop="goodsPrice" label="单价" width="120" align="center">
        </el-table-column>
        <el-table-column prop="goodsNum" label="数量" align="center" width="140"> </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template v-slot="scope"> ￥{{ scope.row.goodsPrice * scope.row.goodsNum }} </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="180" align="center">
          <template #default="scope">
            <!-- 气泡弹出框来确认用户是否要删除商品 @confirm写确认后的事件，逻辑很简单，我就省略了 -->
            <el-popconfirm title="你确定要删除吗?">
              <template #reference>
                <el-button type="info">移除商品</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.constainer {
  width: 100vw; //宽等于屏幕的宽
  height: 100vh; //高等于屏幕的高
  background-color: #ccc;
  padding-top: 50px;
}
.content {
  width: 900px;
  height: 600px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  .goods-info {
    display: flex;
    align-items: center;
    .cart-img {
      margin: 0 1.5em 0 1em;
      width: 80px;
      height: 80px;
    }
    p {
      text-align: left;
    }
    .desc {
      margin-top: 1em;
    }
  }
}
</style>

太多了，下一篇继续分享~