<el-table
:data="tableData" // 绑定数据源，scope="scopedData"中scopedData的数据也来源于此
stripe //stripe属性可以创建带斑马纹的表格
border // 使表格带有边框
style="width: 50%" // 设置所占屏幕的宽度 一般设置为50%
>
// 通过 el-table-column 设置表格一列的信息
<el-table-column
prop="date" // 渲染 数据源 tableData 中 的 data属性到页面
label="日期" // 这一列的表头名
width="180"> // 设置对应宽度
</el-table-column>
//若单独设置一个 type="index" 的 el-table-column 则可以起到索引的效果
<el-table-column type="index"></el-table-column>
// type="expand" 可以展开下栏的列表
// 将想要点击下栏栏展示的内容写在 <el-table-column type="expand"> 内部
<el-table-column type="expand">
<template scope="scopeData">
<el-tag
v-for="(item, index) in scopeData.row.attr_vals"
:key="
本文主要解析了Element-ui的Table组件及其使用的原理。Table组件依赖数据源，通过el-table-column定义列内容，并通过type属性控制列类型。scope='scopeData'中的scopeData与数据源相关联，允许访问对象数组中的每个对象属性，可用于回调函数和循环渲染等操作。
最低0.47元/天 解锁文章
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
