做机电证的网站西安整站优化

一、效果

主要实现一些复杂的字段拼接效果，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' },
]

属性名	含义
label	表头显示文字
field	对应数据中的字段名（字符串）
width	列宽（可选）
temp	自定义渲染函数（可选）

v-for="item, index in props.columns"：

• item：当前列的配置对象，如 { label: '分类ID', field: 'id' }
• index：当前列的索引
• :key="index"：给每个 <el-table-column> 设置唯一标识，避免 Vue 报错

---

设置表头和宽度

:label="item.label" 和 :width="item.width"：设置表头和宽度

• :label=&#