<template>
<!-- 组件功能 -->
<!-- 根据element table组件进行二次封装, 依据数据 动态生成表格数据 参数查看底下props -->
<el-table
:data="tableData"
v-loading="tableLoading"
border
:header-cell-style="HeaderRowStyle"
style="width: 100%"
:height="setTableHeight"
@select-all="selectAllData"
@select="selectData"
:ref="tableRef"
>
<!-- 表格列类型 -->
<el-table-column
v-if="hasSelection"
type="selection"
align="center"
width="50"
/>
<el-table-column
v-if="hasIndex"
type="index"
label="序号"
align="center"
width="80"
/>
<template v-for="(item, i) in tableConfig">
<!-- 特殊渲染列 -->
<!-- 目前操作列有单独渲染，这块也支持, 之前代码有使用 故没有做修改 -->
<el-table-column
v-if="item.render"
:key="i"
:prop="item.prop ? item.prop : null"
:label="item.label ? item.label : null"
:align="item.align ? item.align : 'center'"
:formatter="item.formatter ? item.formatter : null"
:type="item.type ? item.type : null"
:width="item.width ? item.width : 0"
:fixed="fixed ? fixed : null"
>
<template slot-scope="scope">
<column-slot
:render="item.columnRender"
:row="scope.row"
:index="scope.$index"
:column="item"
/>
</template>
</el-table-column>
<!-- 正常内容列 -->
<el-table-column
v-else
:key="i"
:prop="item.prop ? item.prop : null"
:label="item.label ? item.label : null"
:align="item.align ? item.align : 'center'"
:formatter="item.formatter ? item.formatter : null"
:type="item.type ? item.type : null"
:width="item.width ? item.width : 0"
/>
</template>
<el-table-column
v-if="!hideHandleArea"
label="操作"
:fixed="fixed ? fixed : null"
align="center"
:width="tableHandleWidth ? tableHandleWidth : 100"
>
<template slot-scope="scope">
<el-button
v-if="tableBtnConfig.view"
type="text"
@click="view(scope.row)"
>查看</el-button
>
<el-button
v-if="tableBtnConfig.edit"
type="text"
@click="edit(scope.row)"
>编辑</el-button
>
<el-button
v-if="tableBtnConfig.delete"
type="text"
@click="remove(scope.row, scope.$index)"
>删除</el-button
>
<!-- 自定义操作按钮 -->
<span v-if="tableBtnConfig.extends && tableBtnRender">
<tableBtn
:render="tableBtnRender"
:row="scope.row"
:index="scope.$index"
></tableBtn>
</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
import { deepClone } from "@/utils/tools";
var tableBtn = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
},
render: (h, content) => {
const params = {
row: content.props.row,
index: content.props.index,
};
return content.props.render(h, params);
},
};
// 表格单元格自定义内容函数式组件
var columnSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null,
},
},
render: (h, content) => {
const params = {
row: content.props.row,
index: content.props.index,
};
if (content.props.column) params.column = content.props.column;
return content.props.render(h, params);
},
};
export default {
name: "zzsTable",
components: {
tableBtn,
columnSlot,
},
/**
*
* 组件接收参数说明
* tableData: 表格数据
* tableLoading 加载loading
* 表格列类型设置
* hasSelection: 设置了 selection 则显示多选框；
* hasIndex: 设置了 index 则显示该行的索引（从 1 开始计算）
*
* tableConfig 表格配置 type: Array 例子：
* [
* {
* prop:'' 对应列内容的字段名
* label: '' 显示的标题
* render: 是否需要渲染特殊列 type: Boolean
* columnRender 自定义内容渲染 type： Function
* 可用render渲染函数 或者 jsx
* align: center 对齐方式
* formatter: 用来格式化内容(函数) Function(row, column, cellValue, index) 参见element官网
* width:200 对应列的宽度
* type: 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮
* }
* ]
*
* tableConfig 表格配置
* HeaderRowStyle 表头行样式 默认配置 { background: "#f5f7fa", color: "#555"}
* hideHandleArea 是否隐藏表格操作 false 隐藏 true显示
* tableHandleWidth 表格操作区域宽度
*
* fixed 列是否固定在左侧或者右侧，true 表示固定在左
* 也可以设置直接设置位置 left, right
*
* tableBtnConfig 表格操作栏按钮配置 配置字段如下:
* view type:Boolean 是否显示查看按钮
* edit type:Boolean 是否显示编辑按钮
* delete type:Boolean 是否显示删除按钮
* extends 其他自定义按钮
* tableBtnRender 表格操作栏操作栏自定义按钮渲染 type：function
可以用render 渲染函数生成 或者 用jsx 直接写 根据情况使用
例子: tableBtnRender: (h, data)=>{
return h("el-button", {
attrs: {
type: "text",
},
domProps: {
innerHTML: "数据详情",
},
on: {
click: () => {
this.seeDetail(data.row);
},
},
});
}
*/
props: {
// 表格数据
tableData: {
type: Array,
default: () => [],
},
hasSelection: {
type: Boolean,
default: false,
},
hasIndex: {
type: Boolean,
default: false,
},
hasExpand: {
type: Boolean,
default: false,
},
tableColumnType: {
type: Array,
default: () => [],
},
tableConfig: {
type: Array,
default: () => [],
},
HeaderRowStyle: {
type: Object,
default: () => {
return {
background: "#ededed",
color: "#555",
};
},
},
hideHandleArea: {
type: Boolean,
default: true,
},
tableLoading: {
type: Boolean,
default: false,
},
tableHandleWidth: {
type: Number,
default: null,
},
fixed: {
type: [String, Boolean],
default: null,
},
tableBtnConfig: {
type: Object,
default: () => {
return {
isShowViewBtn: false,
isShowEditBtn: false,
isShowDeleteBtn: false,
};
},
},
setTableHeight: {
type: String,
default: () => {
return "100%";
},
},
tableRef: {
type: String,
default: () => {
return "tableRef";
},
},
tableBtnRender: Function,
},
data() {
return {
selectRowData: [],
};
},
methods: {
// 获取选中表格项
getSelectRowData() {
return this.selectRowData;
},
// 表格单个选择数据
selectData(selection, row) {
this.selectRowData = deepClone(selection);
},
// 表格全选数据
selectAllData(selections) {
this.selectRowData = deepClone(selections);
},
// 操作 删除按钮
remove(row, index) {
this.$emit("remove", row, index);
},
// 操作 编辑按钮
edit(val) {
this.$emit("edit", val);
},
// 操作 查看按钮
view(val) {
this.$emit("view", val);
},
},
updated() {
this.$refs.tableRef.bodyWrapper.scrollTop = 0; //滚动条重置
},
};
</script>使用方法 (简单的使用方法)
<baseTable
v-loading="loading"
element-loading-text="加载中"
:table-data="checkList"
:table-config="tableConfig"
:has-index="tableIndex"
:hide-handle-area="hideHandleArea"
:table-btn-config="tableBtnConfig"
:tableBtnRender="tableBtnRender"
/>
// 自定义操作按钮
tableBtnConfig: {
extends: true,
},
tableBtnRender: (h, data) => {
return h("span", {
class: {
handler: true,
},
domProps: {
innerHTML: "详情",
},
on: {
click: () => {
return this.detail(data.row);
}
}
});
},
// 表头对应字段
tableConfig: [
{ label: "查验流水号", prop: "cylsh" , width:'140px'},
{ label: "查验区序号", prop: "cyqxh" },
{ label: "发证机关", prop: "fzjg" , width:'80px' },
{ label: "号牌号码", prop: "hphm" , width:'100px',
formatter: (row) => {
return this.getHphm(row); // 转换表格内容
}
},
{ label: "号牌种类", prop: "hpzl" },
{ label: "车辆识别代号", prop: "clsbdh" },
{ label: "查验员姓名", prop: "cyyxm" },
{ label: "查验日期", prop: "cyrq" , width:'160px' },
// { label: "更新时间", prop: "gxsj" },
],
tempTableData: [] // 表格数据本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
