表格 —— el-table

最新推荐文章于 2024-05-10 09:26:14 发布

Bunury

最新推荐文章于 2024-05-10 09:26:14 发布

阅读量442

点赞数 9

分类专栏： Element-plus 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49352307/article/details/136660147

版权

Element-plus 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

基本使用

data：绑定表格数据

lable：设置表头名称

prop：绑定数组中的数据

row:数组中的每一项相当于item

$index:数组下标

<template #empty>：设置表格空数据

样式

:header-cell-style="{ background: '#f5f3f3' }"：控制表头背景颜色

.tab .el-table tr ：设置表格背景颜色

 <el-table :header-cell-style="{ background: '#f5f3f3' }" :data="pageInfos">
     <el-table-column align="center" type="index" label="序号"                   width="100"></el-table-column>
     <el-table-column label="社团类型" width="120" prop="typeName">
     </el-table-column>
     <el-table-column label="社团名称" width="120" prop="name">
     </el-table-column>
     <el-table-column label="团长" prop="managerName">
     </el-table-column>
     <el-table-column align="center" label="分类别名">
          <template #default="{ row, $index }">
          <el-button @click="change(row,$index)"></el-button>
          </template>
       </el-table-column>
      <!-- 设置空数据显示 -->
        <template #empty>
          <el-empty description="没有数据"></el-empty>
        </template>
 </el-table>