elementUI el-table二次封装组件代码：
CMXtable.vue
<template>
<div class="CMXtable" v-loading="loading">
<el-table
:size="tableSize"
:data="tableDataList"
:style="tableStyle"
:border="tableBorder"
:stripe="tableStripe"
:show-header="showTableHeader"
:header-cell-style="tableHeaderCellStyle"
:cell-style="tableCellStyle"
@selection-change="(list) => $emit('tableSelectionChange', list)"
>
<el-table-column
v-if="isTableSelectionColumn"
type="selection"
width="50"
class-name="selectionColumn"
>
</el-table-column>
<el-table-column
v-for="(columnItem, columnIndex) in tableColumnList"
:key="columnIndex"
:sortable="columnItem.sortable"
:prop="columnItem.prop || ''"
:label="columnItem.label || ''"
:width="columnItem.width || ''"
:min-width="columnItem.minWidth || ''"
:header-align="tableTextAlign"
:align="tableTextAlign"
:showOverflowTooltip="columnItem.showOverflowTooltip"
>
<template v-if="columnItem.isCustomSlot" #default="{ row }">
<slot :name="columnItem.slotName || ''" :row="row"></slot>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "CMXtable",
props: {
loading: {
//是否加载中(单独使用table组件时传)
type: Boolean,
required: false,
},
tableDataList: {
//table数据
type: Array,
required: true,
},
tableColumnList: {
//table列数据
type: Array,
required: true,
},
/* tableColumnList 规则:
[{
prop: "",//使用item属性名
label: "",//表头label
width: "",//列宽
minWidth: "",//最小列宽
sortable:fasle,//是否可排序
showOverflowTooltip:false,
isCustomSlot: false,//是否自定义插槽
slotName:'name',//自定义插槽名，isCustomSlot为true时使用
}]
*/
isTableSelectionColumn: {
//table是否有多选框 选项
type: Boolean,
default: false,
},
showTableHeader: {
//table是否显示表头
type: Boolean,
default: true,
},
// table样式自定义调整 相关
tableTextAlign: {
//table文本对齐方式
type: String,
default: "left",
},
tableSize: {
//table大小规格
type: String,
default: "small",
},
tableBorder: {
//table是否边框
type: Boolean,
default: false,
},
tableStripe: {
//table是否为斑马纹
type: Boolean,
default: false,
},
tableStyle: {
//table 自定义样式
type: Object,
default: () => ({
border: "1px solid #d0d7de",
}),
},
tableHeaderCellStyle: {
//table 表头子项自定义样式
type: Object,
default: () => ({
color: "#47494e",
padding: "8px 0",
fontweight: "bold",
}),
},
tableCellStyle: {
//table 表行子项自定义样式
type: Object,
default: () => ({
color: "#57606a",
padding: "11px 0px",
}),
},
},
data() {
return {
};
},
methods: {
},
};
</script>
<style scoped>
</style>
使用组件：
<CMXtable :tableDataList="tableDataList" :tableColumnList="tableColumnList">
<template #weight="{row}">
<span>{
{row.weight.toFixed(2)}}</span>
</template>
</CMXtable>
data() {
return {
tableDataList: [
{
name: "小明",
age: 22,
weight: 100,
},
{
name: "小红",
age: 20,
weight: 90,
},
{
name: "小李",
age: 21,
weight: 120,
},
{
name: "小张",
age: 26,
weight: 130,
},
],
tableColumnList: [
{
prop: "name", //使用item属性名
label: "姓名", //表头label
},
{
prop: "age", //使用item属性名
label: "年龄", //表头label
},
{
prop: "", //使用item属性名
label: "体重", //表头label
isCustomSlot: true, //是否自定义插槽
slotName: "weight", //自定义插槽名，isCustomSlot为true时使用
},
],
};
},
效果图：
