HTML部分：
<div :class="!isDashbordBealf ? 'table-common':''">
<el-table v-loading="showLoading"
element-loading-text
element-loading-background="rgba(255, 255, 255, 0.7)"
:data="tableData"
:border="border"
style="width: 100%"
:height="height"
:header-cell-style="{
background: '#f5f5f5',
color: '#333333'
}"
:row-class-name="rowClassName"
@selection-change="tableColumnChangeSelect"
@row-click="rowClick">
<!-- 选择 -->
<!-- 多选 -->
<el-table-column v-if="selectionShow"
type="selection"
align="center"
:selectable="selectable" />
<!-- 单选 -->
<el-table-column v-if="redioShow"
:selectable="selectable">
<template slot-scope="scope">
<el-radio v-model="redioVal"
@change="tableColumnChangeRadio(scope.row)" />
</template>
</el-table-column>
<!-- 序号 -->
<el-table-column v-if="index"
type="index"
label="序号"
width="80"
align="center">
<template slot-scope="scope">
<span>{{ (paginitions.current - 1) * paginitions.size + scope.$index + 1 }}</span>
</template>
</el-table-column>
<!-- 数据展示层 -->
<el-table-column v-for="item in tableColumn"
:key="item.prop"
:align="item.align ? item.align : 'left'"
show-overflow-tooltip
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed">
<!-- 自定义插槽 -->
<template slot-scope="scope">
<template v-if="item.slot">
<slot :name="item.prop"
:row="scope.row"
:column="scope.column"
:index="scope.$index" />
</template>
<template v-else>{{ scope.row[item.prop] }}</template>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column v-if="
operates.hasOwnProperty('list')
? operates.list.filter((_x) => _x.show === true).length > 0
: false
"
ref="fixedColumn"
:align="operates.align || 'left'"
:label="operates.label||'操作'"
:fixed="operates.fixed">
<!-- align="left" -->
<template slot-scope="scope">
<div class="operate-group">
<template v-for="(btn, index) in operates.list">
<span v-if="btn.show"
:key="index">
<el-button :key="index"
size="small"
:type="btn.type||'text'"
@click="btn.methods(scope.row, index)">{{ btn.label }}</el-button>
</span>
</template>
</div>
</template>
</el-table-column>
<template v-if="!showLoading && tableData.length === 0"
slot="empty">
<img :src="require('@img/noTableDataList.png')"
alt="暂无数据" />
</template>
</el-table>
</div>
</template>
JS部分：
/**
* @description 封装表格组件
* @param { Boolean } index 表格序号
* @param { Boolean } tableLoading 表格节流
* @param { Array } tableData 数据源
* @param { Boolean } border 表格边框
* @param { Array } tableColumns 表格列数据
* @param { Number } current 页码
* @param { Number } size 一页几条
* @param { String } total 总条数
* @param { Boolean } selectionShow 表格多选 aSelection 值为选中的值 用ref直接可以取到
* @param { Boolean } redioShow 表格单选
* @param { Object } operates 操作列 {fixed:操作是否固定列,label:名称（默认操作）,list:[{label:'按钮名称'，type:按钮类型（默认text），methods：点击事件的方法（scope.row,index）}]}
* @param { Function } handleSizeChange 分页
* @param { Function } handleCurrentChange 翻页操作
* @param { Function } selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
* @param { String || Number} height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
* @param { Boolean } showTotal 是否展示下方分页 默认展示
*/
import paginition from "xxxxxx"; //此处装分页参数
export default {
name: "TableCommon",
mixins: [paginition],
props: {
index: {
type: Boolean,
default: true
},
tableLoading: {
type: Boolean,
default: false
},
tableData: {
type: Array,
default: function () {
return [];
}
},
border: {
type: Boolean,
default: false
},
tableColumns: {
type: Array,
default: function () {
return [];
}
},
total: {
type: [Number, String],
default: 10
},
selectionShow: {
type: Boolean,
default: false
},
redioShow: {
type: Boolean,
default: false
},
operates: {
type: Object,
default: function () {
return {};
}
},
selectable: {
type: Function,
default: function () {
return true;
}
},
height: {
type: [Number, String],
default: null
},
showTotal: {
type: Boolean,
default: true
},
rowClassName: {
type: Function,
default: function () { }
}
},
data () {
return {
redioVal: "",
showLoading: false,
aSelection: []
};
},
computed: {
/**
* 处理权限 tableColumns中有show 列不展示
* 减少v-for和v-if联合使用 而写的方法
* 从源头去处理数组 减少v-if的操作
* */
tableColumn: function () {
return this.tableColumns.filter(item => {
// 传入参数无show 所以 undefined为真
return item.show || item.show === undefined;
});
},
isDashbordBealf () {
return this.$route.path === "/dashboard/dashHome";
}
},
watch: {
tableLoading: {
deep: true,
handler (nVal, oVal) {
this.showLoading = nVal;
if (nVal === oVal) {
return;
}
if (nVal) {
// 开启loading后 长时间未处理 去除loading
setTimeout(() => {
this.showLoading = false;
}, 20000);
}
}
}
},
mounted () {
},
methods: {
/**
* 表格点击行方法
* row 行
* column 列
* event 事件
* */
// 表格点击当前行方法
rowClick (row, column, event) {
this.$emit("row-click", row, column, event);
},
// 表格多选选中方法
tableColumnChangeSelect (val) {
this.aSelection = JSON.parse(JSON.stringify(val));
this.$emit("tableColumnChangeSelect", val);
},
// 表格单选选中方法
tableColumnChangeRadio (val) {
this.$emit("tableColumnChangeRadio", val);
},
//父组件更新
getTableDataList () {
this.$emit("getTableDataList", this.paginition);
},
}
};
</script>
