基于 Element 表格组件进行二次封装
首先来看张截图
注:表格列和行支持拖动 去查看
- 在项目 views 目录下新建表格展示页面
<template>
<div class="container">
<my-eltable
ref="table"
id="printTable"
:fit="true"
:size="'small'"
:isShow="isShow"
:loading="loading"
:tableData="tableData"
:tabheight="tabheight"
:tableHeader="tableHeader"
@rowClick="rowClick"
@rowDblclick="rowDblclick"
@selectionChangeHandle="selectionData"
></my-eltable>
</div>
</template>
<script>
// 引入表格组件
import MyEltable from "@/components/commonTable";
export default {
components: {
MyEltable,
},
data() {
return {
// 是否显示复选框
isShow: true,
// 加载提示
loading: false,
// 表格高度,这里做了自适应高度,一般需要写固定值
tabheight: "100%",
// 表头数据
tableHeader: [
{ prop: "Name", label: "卡号" },
{ prop: "LabelType", label: "标签类型" },
{ prop: "ObjectType", label: "对象类型" },
{ prop: "ObjectValue", label: "对象值" },
// 如果后端传过来的值不是我们所预期的,此处可以如下格式化,isTag 是否需要渲染为el-tag标签
{ prop: "Enable", label: "是否启用",
isTag: true,
formatData: function (val) {
return val === true ? "启用" : "禁用";
},
},
{ prop: "Protect", label: "是否设防",
isTag: true,
formatData: function (val) {
return val === true ? "设防" : "未设防";
},
},
// 表格操作
{
prop: 'operate', label: '操作', fixed: 'right', minWidth: '160px', width: '200px',
operate: [
{ name: '修改', type: 'primary', size: 'small', icon: 'el-icon-edit', clickFun: this.editRowData },
{ name: '删除', type: 'danger', size: 'small', icon: 'el-icon-delete', clickFun: this.deleteRowData }
]
}
],
// 表格数据
tableData: [
{
id: 1,
Name: '测试数据',
LabelType: '一般',
ObjectType: '复杂',
ObjectValue: '{a: 1}',
Enable: true,
Protect: false
},
{
id: 2,
Name: '测试数据2',
LabelType: '常用',
ObjectType: '简单',
ObjectValue: '{a: 2}',
Enable: false,
Protect: true
},
{
id: 3,
Name: '测试数据3',
LabelType: '重要',
ObjectType: '复杂',
ObjectValue: '{a: 3}',
Enable: true,
Protect: false
},
],
};
},
computed: {},
created() {},
mounted() {},
watch: {},
methods: {
// 编辑
editRowData(row) {
console.log("编辑", row);
},
// 删除
deleteRowData(row) {
console.log("删除", row);
},
// 复选 | 全选
selectionData(value) {
console.log("复选", value);
},
// 单击表格
rowClick(row, event, column) {
},
// 双击表格
rowDblclick(row, event, column) {
}
},
destroyed() {},
};
</script>
<style scoped lang="scss"></style>
- 在项目的components文件夹下创建表格组件
<template>
<div class="container">
<!--
fit: 列的宽度是否自撑开;
border: 是否带有纵向边框;
stripe: 是否为斑马纹 table;
highlight-current-row: 是否要高亮当前行;
-->
<el-table
fit
border
stripe
size="size"
:data="tableData"
:height="tabheight"
v-loading="loading"
ref="multipleTable"
highlight-current-row
@row-click="rowClick"
@row-dblclick="rowDblclick"
@selection-change="selectionChangeHandle"
element-loading-text="正在加载中..."
element-loading-background="rgba(0, 0, 0, 0.3)"
>
<!-- 是否需要多选 由isShow控制 -->
<el-table-column
v-if="isShow"
type="selection"
align="center"
fixed
></el-table-column>
<!--
prop: 字段名
label: 展示的名称
fixed: 是否需要固定(left, right)
minWidth: 设置列的最小宽度(不传默认值),
operate: 是否有操作列
operate.name: 操作列字段名称
btn.clickFun: 操作列点击事件
formatters: 格式化内容
-->
<el-table-column
v-for="(th, key) in tableHeader"
:key="key"
:prop="th.prop"
:label="th.label"
:fixed="th.fixed"
:width="th.width"
:min-width="th.minWidth"
align="center"
>
<!-- 加入template主要是有操作一栏, 操作一栏的内容是相同的, 数据不是动态获取的,这里操作一栏的名字定死 (operate表示是操作这一列, 否则就不是) -->
<template slot-scope="scope">
<!-- formatters: 自定义过滤器 -->
<div v-if="!th.operate">
<span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
<!--这一块做 el-tag 标签样式判断。不需要可以去除判断 -->
<span v-else>
<el-tag
v-if="th.isTag === true"
:type="scope.row[th.prop] === true ? 'success' : 'info'"
>{{ scope.row[th.prop] | formatters(th.formatData, scope.row[th.prop]) }}</el-tag>
</span>
</div>
<div v-else>
<el-button
v-for="(btn, key) in th.operate"
:key="key"
:size="btn.size"
:type="btn.type"
:icon="btn.icon"
@click="btn.clickFun(scope.row)"
>{{ btn.name }}
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
tableData: {
// 表格数据
type: Array,
default: function () {
return [];
},
},
tableHeader: {
// 表格头部数据
type: Array,
default: function () {
return [];
},
},
tabheight: {
// 表格高度,默认自适应
type: String,
default: "100%",
},
fit: {
// 列的宽度是否自撑开
type: Boolean,
default: true
},
size: {
// 表格尺寸
type: String,
default: 'small'
},
loading: {
// 加载等待
type: Boolean,
default: false,
},
isShow: {
// 是否显示复选框
type: Boolean,
default: false,
},
// rowClick: {
// // 单击当前行获取该行数据
// type: Function,
// default: (row, event, column) => {
// this.$emit('rowClick', row, event, column)
// },
// },
// rowDblclick: {
// // 双击当前行获取该行数据
// type: Function,
// default: (row, event, column) => {
// this.$emit('rowDblclick', row, event, column)
// },
// },
},
data() {
return {};
},
computed: {},
created() {},
mounted() {},
watch: {},
filters: {
/**
* val: 格式化的值
* cb: 格式化函数
*/
formatters(val, cb) {
return cb(val);
},
},
methods: {
// 单击当前行获取该行数据
rowClick(row, event, column) {
this.$emit("rowClick", row, event, column);
},
// 双击当前行获取该行数据
rowDblclick(row, event, column) {
this.$emit("rowDblclick", row, event, column);
},
// 获取被选中的复选框行的id
selectionChangeHandle() {
let ids = [];
let data = this.$refs.multipleTable.selection;
for (let i = 0; i < data.length; i++) {
ids.push(data[i].id);
}
this.$emit("selectionChangeHandle", ids);
}
},
destroyed() {},
};
</script>
<style scoped lang="scss"></style>
存在的问题:
表格的下面可能会多出来一条线,看起来不美观,解决办法就是在组件中添加如下样式就OK了。
::v-deep .el-table__body-wrapper {
height: 100% !important;
}