当前位置：首页 > news >正文

vue3:十三、分类管理-表格--slot插槽详细说明---表格内拼接字段、tag标签

news 来源：原创 2025/5/15 5:56:33

一、效果

主要实现一些复杂的字段拼接效果，tag小标签展示，图片展示，按钮展示等均可使用插槽

二、表格说明

这里子组件单元格的显示也是通过插槽展示的

1、表格数据传递说明

如下图所示展示表格内容的数据传递(表头信息除外，表头columns直接参考api路径的传递，也是通过父组件中定义，父组件中传递参数给子组件，子组件获取传递的参数)

逻辑层之间的数据传递

逻辑层与视图层的数据传递

2、表格数据展示说明

(1)整体结构说明

<el-table 
class="table"
ref="multipleTableRef"
:data="tableData"
row-key="id"
@selection-change="handleSelectionChange"
v-loading="tableloading"
>

属性	含义
`class="table"`	自定义类名，用于 CSS 样式控制
`ref="multipleTableRef"`	给表格一个引用名，方便在 JS 中操作表格（如刷新、获取选中行）
`:data="tableData"`	表格的数据源(接口请求获取的数据)，是一个数组，每项是一个对象
`row-key="id"`	每一行的唯一标识字段（用于树形结构或分页保持选中状态）
`@selection-change="handleSelectionChange"`	多选时触发的事件，返回当前选中的行数据
`v-loading="tableloading"`	控制表格是否显示加载动画

(2)表格首列的生成方式

<el-table-column type="selection" :selectable="selectable" width="55" />

第一列：多选列
- type="selection"：表示这是复选框列
- :selectable="selectable"：可选函数，控制某行是否可以被选中（比如禁用某些行）

(3)动态列渲染 — 最核心的部分

<el-table-column :label="item.label" :width="item.width" v-for="item, index in props.columns" :key="index"><template #default="scope"><template v-if="item.temp"><div v-html="item.temp(scope.row, scope.$index)"></div></template><template v-else><div>{{ scope.row[item.field] }}</div></template></template>
</el-table-column>

循环生成列

使用v-for="item, index in props.columns"：循环生成列

通过父组件传递的参数props.columns，将数据进行循环展示

props.columns

从父组件传进来的列配置数组

const columns = [{ label: '分类ID', field: 'id', width: 120 },{ label: '父分类ID', field: 'pid', width: 120 ,temp:(row,index)=>{return row.pid?`<b>${row.pid}</b>`:'—'} },{ label: '分类名称', field: 'name', width: 200 },{ label: '分类描述', field: 'desc' },
]