基于 Element 表格组件进行二次封装
首先来看张截图
- 在项目 views 目录下新建表格展示页面
<template>
<div class="container">
<!-- 参数配置请看组件的 `props` 部分 -->
<my-eltable
ref="table"
id="printTable"
:fit="true"
:size="'small'"
:isShow="isShow"
:loading="loading"
:dragTable="true"
:rowDragTable="false"
:colDragTable="false"
:tableData="tableData"
:tabheight="tabheight"
:tableHeader="tableHeader"
@rowClick="rowClick"
@rowDblclick="rowDblclick"
@dragTableData="dragRowTableData"
@dragColTableData="dragColTableData"
@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: [],
// 表格数据
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() {
var array = [
{ prop: "Name", label: "卡号" },
{ prop: "LabelType", label: "标签类型" },
{ prop: "ObjectType", label: "对象类型" },
{ prop: "ObjectValue", label: "对象值" },
// 如果后端传过来的值不是我们所预期的，此处可以如下格式化，isTag是否需要渲染为el-tag
{
isTag: true,
prop: "Enable",
label: "是否启用",
formatter: function (val) {
return val === true ? "启用" : "禁用";
},
},
{
isTag: true,
prop: "Protect",
label: "是否设防",
formatter: 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 },
]
}
]
this.tableHeader = array
},
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) {
},
// 表格行拖动排序后的数据, 一般要请求接口保存到后台
dragRowTableData(data) {
},
// 表格列拖动排序后的数据, 一般要请求接口保存到后台
dragColTableData(data) {
},
},
destroyed() {},
};
</script>
<style scoped lang="scss"></style>- 在项目的components文件夹下创建表格组件
在使用之前你需要安装相关插件
npm install sortablejs --save
<template>
<div class="container">
<!--
fit: 列的宽度是否自撑开;
border: 是否带有纵向边框;
stripe: 是否为斑马纹 table;
highlight-current-row: 是否要高亮当前行;
-->
<el-table
fit
border
stripe
size="size"
row-key="id"
: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: 操作列点击事件
formatter: 格式化内容
-->
<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">
<!-- formatData: 自定义过滤器 -->
<div v-if="!th.operate">
<span v-if="!th.formatter">{{ 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] | formatData(th.formatter, 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>
import Sortable from 'sortablejs';
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",
},
rowDragTable: {
// 行拖拽
type: Boolean,
default: false
},
colDragTable: {
// 列拖拽
type: Boolean,
default: false
},
dragTable: {
// 表格拖拽，为true支持行/列拖拽
type: Boolean,
default: false
},
loading: {
// 加载等待
type: Boolean,
default: false,
},
isShow: {
// 是否显示复选框
type: Boolean,
default: false,
},
},
data() {
return {};
},
computed: {},
created() {},
mounted() {
// 在模板渲染成html完成后调用，不然会报错 `el` must be an HTMLElement
if(this.rowDragTable === true) return this.rowDrop();
if(this.colDragTable === true) return this.columnDrop();
if(this.dragTable === true) {
this.rowDrop();
this.columnDrop();
}
},
watch: {},
filters: {
/**
* val: 格式化的值
* cb: 格式化函数
*/
formatData(val, cb) {
return cb(val);
},
},
methods: {
// 行拖拽
rowDrop () {
// 此时找到的元素是要拖拽元素的父容器
const tbody = document.querySelector('.el-table__body-wrapper tbody');
const _this = this;
Sortable.create(tbody, {
// 指定父元素下可被拖拽的子元素
draggable: ".el-table__row",
onEnd ({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
_this.$emit('dragTableData', _this.tableData)
}
});
},
// 列拖拽
columnDrop () {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.tableHeader[evt.oldIndex];
this.tableHeader.splice(evt.oldIndex, 1);
this.tableHeader.splice(evt.newIndex, 0, oldItem);
this.$emit('dragColTableData', this.tableHeader)
}
});
},
// 单击当前行获取该行数据
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">
::v-deep .el-table__body-wrapper {
height: 100% !important;
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
