微信小程序平台_基于Vue+element

2021-01-08 13:56 admin
基于Vue+element-ui 的Table二次封装的实现       这篇文章主要介绍了基于Vue+element-ui 的Table二次封装的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本人第一次写这个 写的不好还望指出来

作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 !

公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个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一样了

Table from '@/-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;
 () {
 return this.$store.state.user.userInfo;
 watch: {
 moduletype() {
 this.init();
 created() {
 this.init();
 methods: {
 init() {
 GetTempletExportList(.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;
  = 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 
 div 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" height="100%" border @selection-change="handleSelectionChange" @row-click="rowClick" @row-dblclick='rowDblclick' @cell-dblclick="celldblclick" 
 slot /slot 
 /el-table 
 /div 
 div 
 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 
momway from '../../monway.js' //分页
export default {
 name: 'com-table',
 pro凡科抠图: {
 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() {
 mon = momway();
 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: 
 * @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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。