对于开发后台管理系统的时候，需要用到大量的表格，我们可以写一个表格公共组件进行复用，提高开发效率和便于以
后维护。
复制代码子组件：总的来说封装判断表格里单元格的数据形式，分为了3个部分，第一部分是添加多选框，第二部分是包含其他形式，不能把它们直接当作纯数据渲染，需要用到插槽，然后在父组件里填充插槽，第三部分就是单纯的数据，可以直接在父组件里header数组传进来
<el-table class="table-box" ref="multipleTable" :data="table.tableData"
style="width: 100%"
>
<template v-for="(item, index) in table.header" :key="index">
<!-- 如果表格需要实现多选，在表头数据中添加{ prop: "selection" }即可 -->
<el-table-column
type="selection"
:width="item.width"
v-if="item.prop == 'selection'"
></el-table-column>
<!-- 如果单元格数据不是单纯的数据格式，需要添加其它形式，例如图标，或者其它形式，
在表头header数组里的元素设置isStatus: true，其它代码在父组件里写，填充此处的插槽 -->
<template v-else-if="item.isStatus">
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
:min-width="item.minWidth"
>
<template #default="scope">
<slot
name="status"
:row="scope.row"
:label="item.label"
:index="scope.$index"
></slot>
</template>
</el-table-column>
</template>
<!-- 单元格数据只是单纯的数据，表头header数组里的元素只需传入prop、label、width,如果需要给某
一列的数据添加颜色，可以直接传color -->
<el-table-column
v-else
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
>
<template #default="scope">
<el-popover
placement="top"
width="260"
trigger="hover"
:disabled="item.tooltip ? false : true"
>
<span>{{ scope.row[item.prop] }}</span>
<template #reference>
<span
class="multi-line-hidden cursor"
:style="{
'-webkit-line-clamp': item.multiLine ? item.multiLine : '',
color: item.color ? item.color : '',
}"
>{{ scope.row[item.prop] }}</span
>
</template>
</el-popover>
</template>
</el-table-column>
</template>
</el-table>
复制代码这里还用到了elementui的el-popover进行单元格的文字超出隐藏之后完整数据的展示，但需要在子组件写文字超出隐藏的样式
.multi-line-hidden {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
复制代码在子组件props接收父组件传入的值
props: {
/**
* 接受父组件传入的值
* table: {
* tableData: [], 表格数据
* header: [] 表头数据
* }
*
* 表头header数组里对象属性：
* prop：对应列内容的字段名
* label：显示的标题
* width：对应列的宽度
* fixed：列是否固定在左侧或者右侧
* isStatus：单元格数据不是单纯的数据，需要另外添加形式，设置了true，要在父组件里写相关代码填充插槽
* tooltip：单元格数据是否需要弹出框Popover
* color：控制单元格数据的颜色（除颜色是主题色时，需用插槽单独写，使用主题色变量）
* multiLine：控制单元格数据需要几行显示，多余的用省略号代替
* minWidth: 控制操作列的最小宽度
*
*/
table: {
type: Object,
required: true,
}
}
复制代码父组件：
需要传的值
table: {
// 接口请求返回的数据
tableData: [],
header: [
{ prop: "id", label: "品牌ID", width: 50 },
{ prop: "logoUrl", label: "品牌LOGO", width: 70, isStatus: true },
{ prop: "name", label: "品牌名称", width: 100 },
{ prop: "alias",label: "品牌别名",width: 60,multiLine: 1,tooltip: true},
{ prop: "desc",label: "品牌描述",width: 140,multiLine: 1,tooltip: true,},
{ prop: "brandGroupName", label: "品牌分组", width: 60 },
{ prop: "", label: "商品数量", width: 116, isStatus: true },
{ prop: "createTime", label: "添加时间", width: 140 },
{ prop: "status", label: "状态", width: 60, isStatus: true },
{ prop: "", label: "操作", isStatus: true },
]
}
复制代码公共组件的使用
<common-table :table="table">
<!-- 插槽的使用 -->
<template #status="scope">
<template v-if="scope.label === '品牌LOGO'">
</template>
<template v-if="scope.label === '商品数量'">
</template>
<template v-if="scope.label === '状态'">
</template>
<template v-if="scope.label === '操作'">
<button class="btn-blue marRight8" @click="edit(scope.row)">
编辑
</button>
<button
:class="scope.row.status ? 'btn-red' : 'btn-green'"
class="marRight8"
@click="switchEnable(scope.row)"
>
{{ !scope.row.status ? "启用" : "禁用" }}
</template>
</template>
</common-table>
复制代码
