基于Vue+element-ui 的Table二次封装的实现
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于Vue+element-ui 的Table二次封装的实现，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8725字，纯文字阅读大概需要13分钟。
内容图文
本人第一次写这个 写的不好还望指出来
作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ！
公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了
效果图
表格组件的引入与使用
<com-table title="监测数据" v-model="tableData4" @selection-change="handleSelectionChange">
<template>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column prop="name" label="表格名称" align="center">
</el-table-column>
<el-table-column label="测点" align="center">
<template slot-scope="scope" v-if="scope.row.point.visible">
<el-input v-model="scope.row.point.value" placeholder="请输入内容" @focus="focuspoint(scope.row.point)"></el-input>
</template>
</el-table-column>
<el-table-column label="项目" align="center">
<template slot-scope="scope" v-if="scope.row.item.visible">
<el-input v-model="scope.row.item.value" placeholder="请输入内容" @focus="focusitem(scope.row.item)"></el-input>
</template>
</el-table-column>
</template>
</com-table>
使用插槽slot 使用起来就和原来的table一样了
import comTable from '@/components/common/com-table'
import { GetTempletExportList, GetTempletExportInfo } from '../../../api/transfer/index'
import ApiConfig from '@/api/ApiConfig'
export default {
name: 'templet',
components: {
comTable
},
data() {
return {
tableData4: [],
exporttableData: [],
multipleSelection: [],
currentpoint: null,
currentitem: null,
itemdialogshow: false,
pointdialogshow: false,
path: new ApiConfig().GetConfig().SysPath,
checkeditem: [],//选中数据
}
},
computed: {
moduletype() {
return this.$store.state.moduletype;
},
userinfo() {
return this.$store.state.user.userInfo;
}
},
watch: {
moduletype() {
this.init();
}
},
created() {
this.init();
},
methods: {
init() {
GetTempletExportList(this.userinfo.cityid, this.moduletype).then(re => {
this.exporttableData = re.data;
this.tableData4 = [];
re.data.map(item => {
this.tableData4.push({
name: item.fldTableDesc,
point: {
visible: false,
value: ''
},
item: {
visible: true,
value: item.ItemList
}
})
})
}, (error) => {
this.$message({
customClass: 'el-message_new',
message: error,
type: 'error'
});
})
},
handleSelectionChange(val) {
console.log(val)
this.multipleSelection = val;
},
focuspoint(val) {
this.currentpoint = val;
},
focusitem(val) {
this.currentitem = val;
this.itemdialogshow = true;
},
itemconfirm() {
this.itemdialogshow = !this.itemdialogshow;
},
itemhandleClose(done) {
this.itemdialogshow = false;
},
ItemGroupSelectchange(val) {
this.checkeditem = val;
console.log(this.checkeditem);
let groupitemcontent = [];
val.map(item => {
groupitemcontent.push(item.fldItemName);
})
this.currentitem.value = groupitemcontent.join(',');
},
submit() {
if (this.multipleSelection.length > 0) {
let message = "";
let data = [];
let name = "";
this.multipleSelection.map((item, index) => {
name = item.name;
let str = item.name;
let info = false;
if (item.item.visible && item.item.value == "") {
message += `表[${str}]请选择因子`;
info = true;
}
if (item.point.visible && item.point.value == "") {
if (info) {
message += `、请选择测点/断面！`;
} else {
message += `表[${str}]请选择测点/断面！`;
}
info = true;
}
if (info) {
message += "<br/>"
}
data.push({
"AutoID": "1",
"STCode": "",
"PCode": "",
"RCode": "",
"RScode": "",
"GDCODE": "",
"type": this.moduletype,
"itemcodeList": item.item.value.split(',').join('^'),
"path": `${this.path.TempletExportSetting}${this.moduletype}.json`,
"IsNeedNullData": "Y"
})
})
if (message == "") {
GetTempletExportInfo(data).then(re => {
if (re.status == "ok") {
var exportdata = eval((re.data));
const { export_json_to_excel } = require("../../../libs/Export2Excel");
if (exportdata[0].merg.length != 0) {
var exdata = [];
var itemlistUnit = [];
var itemlistfldCharCode = [];
for (var z = 0; z < exportdata[0].head.length - this.checkeditem.length; z++) {
itemlistUnit.push(exportdata[0].head[z]);
itemlistfldCharCode.push(exportdata[0].head[z])
}
this.checkeditem.map(item => {
itemlistUnit.push(item.fldUnit);
itemlistfldCharCode.push(item.fldCharCode);
})
var exdata = this.formatJson(exportdata[0].head, exportdata[0].data);
exdata.unshift(itemlistUnit);
exdata.unshift(itemlistfldCharCode);
exdata.unshift(exportdata[0].head);
console.log(exdata)
exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0])
export_json_to_excel([name], exdata, name, exportdata[0].merg);
} else {
var exdata = this.formatJson(exportdata[0].head, exportdata[0].data);
exdata.unshift(exportdata[0].head);
exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0])
export_json_to_excel([name], exdata, name, exportdata[0].merg);
}
} else {
this.$message({
message: '导出失败！',
type: 'error'
});
}
})
} else {
this.$message({
dangerouslyUseHTMLString: true,
customClass: 'el-message_new',
message: message,
type: 'warning'
});
}
} else {
this.$message({
customClass: 'el-message_new',
message: '请先选择要导出的列表！',
type: 'warning'
});
}
},
formatJson(filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
return v[j];
})
);
}
}
}
comTable组件
<template>
<div class="com-table">
<div class="com-table-title" v-if="title">
{{title}}
</div>
<div :class="[title?'com-table-content':'com-table-content-nottitle']">
<el-table v-loading="loading" ref="multipleTable" stripe :data="tableData" style="width: 100%;" height="100%" border @selection-change="handleSelectionChange" @row-click="rowClick" @row-dblclick='rowDblclick' @cell-dblclick="celldblclick">
<slot></slot>
</el-table>
</div>
<div class="com-table-page">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PageIndex" :page-sizes="page_sizes" :page-size="Size" :layout="layout" :total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import commomway from '../../common/commonway.js' //分页
export default {
name: 'com-table',
props: {
value: {//数据
type: [Array, Object],
default: () => {
return [];
}
},
PageSize: {//当前一页显示多少条数据
type: Number,
default: 20
},
page_sizes: {//分页规则
type: Array,
default: () => {
return [1, 20, 40, 60, 80]
}
},
current_page: {//当前所在页
type: Number,
default: () => {
return 1;
}
},
layout: {
type: String,
default: () => {
return 'total, sizes, prev, pager, next, jumper';
}
},
title: {//表格title
type: String,
default: () => {
return '';
}
},
loading: {
type: Boolean,
default: false
}
},
data() {
return {
tableData: [],
//页数索引
PageIndex: this.current_page,
//每页显示的数量
Size: this.PageSize,
oldmultipleSelection: [],//旧的选中值
multipleSelection: []//当前选中数据
}
},
watch: {
value(val) {
this.getpagedata();
},
tableData(val) {
// console.log(val);
},
multipleSelection(val, old) {
this.oldmultipleSelection = old;
}
},
mounted() {
this.getpagedata();
},
computed: {
total() {
return this.value.length;
}
},
methods: {
//获得分页后的数据
getpagedata() {
var common = new commomway();
this.tableData = common.pagination(this.PageIndex, this.Size, this.value, false);
this.$emit("input", this.value);
setTimeout(() => {//由于表格重新渲染延迟执行勾选
this.toggleSelection(this.oldmultipleSelection)
}, 20)
},
//点击每页显示数量时触发
handleSizeChange: function (val) {
this.Size = val;
this.getpagedata();
this.$emit('handleSizeChange', val);
},
//翻页的时候触发
handleCurrentChange: function (val) {
this.PageIndex = val;
this.getpagedata();
this.$emit('handleCurrentChange', val);
},
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('selection-change', val);
},
toggleSelection(rows) {//勾选值
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
rowClick(row, event, column){
this.$emit('row-click', row, event, column);
},
celldblclick(row, column, cell, event){
this.$emit('cell-dblclick', row, column, cell, event);
},
rowDblclick(row,enent){
//console.log(row,enent)
}
}
}
</script>
<style lang="sass">
@import "./com-table.scss";
</style>
commonway.js
class CommonWay {
/**
* description：对数组的分页处理
* author:bilimumu
* date:2017-10-28
* @param {number} [pageNo=1] 页码
* @param {number} [pageSize=10] 每页显示条数
* @param {any} [obj=[]] 待分页的数组
* @param {Boolean} [iscreateNewdata=true] 是否创建新的数据
* @returns 返回新的数组
* @memberof CommonWay
*/
pagination(pageNo = 1, pageSize = 10, obj = [], iscreateNewdata = true) {
var array = [];
if (iscreateNewdata) {
array = JSON.parse(JSON.stringify(obj));
} else {
array = obj;
}
var offset = (pageNo - 1) * pageSize;
return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
}
}
export default CommonWay
com-table.scss
.com-table {
height: 100%;
width: 100%;
&-title {
color: #FFF;
background: #42A2F5;
padding: 0;
font-size: 15px;
height: 40px;
line-height: 40px;
text-indent: 8px;
}
&-content {
width: 100%;
height: calc(100% - 40px - 55px);
}
&-content-nottitle {
width: 100%;
height: calc(100% - 55px);
}
&-page {
height: 55px;
width: 100%;
background: #EFF3F8;
display: flex;
align-items: center;
justify-content: center;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的基于Vue+element-ui 的Table二次封装的实现全部内容，希望文章能够帮你解决基于Vue+element-ui 的Table二次封装的实现所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】