vue组件系列4、Table封装下

最新推荐文章于 2024-06-26 15:41:00 发布
最新推荐文章于 2024-06-26 15:41:00 发布
阅读量777 收藏
点赞数
文章标签： javascript python json ViewUI
原文链接：https://my.oschina.net/qingqingdego/blog/3026537
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

知道了slot 怎么用，才可以理解table这样封装的原因

table插件部分

<template>
  <div>
    <!-- 关键字部分 -->
    <div class="pre_search" v-show="show_key">
      <label>关键字：</label>
      <input type="text" placeholder="请输入关键字" v-model="key_word" />
    </div>
    <!-- table部分 -->
    <div class="pre_tab">
      <table class="pre_dataintable">
        <thead>
          <slot name="tab_title"></slot>
        </thead>
        <tbody>
          <slot
            name="tab_tr"
            v-for="data_tr in data_tab"
            :item="data_tr"
          ></slot>
        </tbody>
        <tbody>
          <slot v-if="show_add" name="tab_add"></slot>
          <slot v-if="show_upd" name="tab_upd"></slot>
        </tbody>
      </table>
    </div>
    <!-- 分页部分 -->
    <div class="pre_page" v-show="show_page">
      <ul style="text-align: right; margin-right: 20px;">
        <li>
          当前页：<label>{{ nowpage }}</label
          >&nbsp; 合计页：<label>{{ maxpage }}</label
          >&nbsp;&nbsp; <a href="#" @click="firstpage">首页</a>|
          <a href="#" @click="beforepage">上一页</a>|
          <a href="#" @click="nextpage">下一页</a>|
          <a href="#" @click="lastpage">尾页</a>
          <input type="text" v-model="jumppage" value="" /><a
            href="#"
            @click="gopage"
            class="go"
            >Go</a
          >
        </li>
      </ul>
    </div>
    <!-- 组件引入部分 弹窗组件和等待组件 -->
    <div>
      <per-message ref="msg_back" :message_data="msg_obj" />
      <pre-loading :pre_show_loading="fullloading" />
    </div>
  </div>
</template>
<script >
/*
名称：Table组件
日期：2019-03-21
作者：hj
目标：1、传入一组数据,自动构建标题和内容=>两个数组  1个数组是标题  1个数组是内容  方便构造 
     2、所有的增、删、改、查、均在组件内容完成。
     3、还可以分页

分析：1、增、删、改、查 调用api主动配置。=>容易
     2、标题主动配置。=>容易
     3、每一列的校验方式 =>配置  
     4、数据绑定？通过 solo 占位符实现

*/

export default {  
  name: "pre_select_one",
  components: {    
    'per-message':()=>import("./pre_message.vue"),
    'pre-loading':()=>import("./pre_loading.vue")
  },  
  data() {
    return {
      data_tab: [],
      show_key:true,
      key_word:'',
      show_page:true,
      maxpage:'',
      nowpage:'',
      jumppage:'',
      msg_obj:{},
      fullloading:false,
      show_add:false,
      show_upd:false
    };
  },
  props: {
    api_url:String,
    pre_post:String,
    pre_post_add:{ type:String,default:'' },
    pre_post_del:{ type:String,default:'' },
    pre_post_upd:{ type:String,default:'' },
  },
  created:function(){
      this.nowpage=1;
  },
  watch:{
    pre_post(val){
      this.loaddata();
    },
    pre_post_add(val){
      if(String(val)!='')
        this.data_add();
    },
    pre_post_del(val){
      if(String(val)!='')
        this.data_del();
    },
    pre_post_upd(val){
      if(String(val)!='')
        this.data_upd();
    }
  },
  mounted() {
    this.initTable();
    this.loaddata();
  },
  methods: {
    initTable:function(){
      if(Number(this.maxpage)==0){
        this.show_page=false;
      }else{
        this.show_page=true;
      }
    },
    firstpage:function(){
        if(Number(this.nowpage)>1){
            this.nowpage=1;
            this.refresh_data();
        }else{
            this.msg_obj={'showtype':'warning','note':'已经是第一页'};
        }
    },
    beforepage:function(){
        if(Number(this.nowpage)>1){
            this.nowpage--;
            this.refresh_data();
        }else{
            this.msg_obj={'showtype':'warning','note':'已经是第一页'};
        }
    },
    nextpage:function(){
        if(Number(this.nowpage)<Number(this.maxpage)){
            this.nowpage++;
            this.refresh_data();
        }else{            
            this.msg_obj={'showtype':'warning','note':'已经是最后一页'};
        }
    },
    lastpage:function(){
        if(Number(this.nowpage)<Number(this.maxpage)){
            this.nowpage=this.maxpage;
            this.refresh_data();
        }else{
            this.msg_obj={'showtype':'warning','note':'已经是最后一页'};
        }
    },
    gopage:function(){
        console.log('跳转到='+this.jumppage);
        if(Number(this.jumppage)>0 && Number(this.jumppage)<=Number(this.maxpage)){
            this.nowpage=this.jumppage;
            this.refresh_data();
        }else{
            this.msg_obj={'showtype':'warning','note':'跳转页数不在规定范围内,请检查'+this.jumppage};
        }
    },
    loaddata:function() {
      // console.log(this.api_url);
      // console.log(this.pre_post);      
      this.fullloading=true;
      this.$post(
        this.api_url,
        this.pre_post,
      ).then(res => {
        this.fullloading=false;
        this.show_add=false;
        this.show_upd=false;

        try {         
          res=JSON.parse(res); 
          // console.log(res.data);         
          if (res.data.status == 1) {
            this.maxpage=res.data.allpage;
            this.data_tab=res.data.data;
          } else {
            this.msg_obj={'showtype':'warning','note':res.msg};
          }
          this.initTable();
        } catch (ex) {
          this.msg_obj={'showtype':'warning','note':"查询失败"+ex};
        }
      });
    },
    data_add:function(){
      // 只是 Postjson 和 提示结果不一样 其他一样。没有必要重新定义方法,所以只控制展示
      this.show_add=true;
      this.show_upd=false;
    },
    data_upd:function(){
      this.show_add=false;
      this.show_upd=true;
    },
    refresh_data() {
      console.log('刷新');
      this.$emit("tab-event", this.nowpage,this.key_word);
    }
  }
};
</script>
 
<style scoped >
/* pre_search */
.pre_search {
  text-align: left;
}
.pre_search > label {
  position: relative;
  left: 2%;
}
.pre_search > input {
  position: relative;
  left: 2%;
}
.pre_search > input :focus {
  border: 1px solid #024aee;
  background-color: #aaa;
}

/* table 整体样式 */
.pre_dataintable {
  margin-top: 15px;
  border-collapse: collapse;
  border: 1px solid #aaa;
  width: 95%;
  /* padding 没有作用 */
  /* padding: 0px 5px 10px 5px; */
  position: relative;
  left: 2%;
}
.pre_dataintable th {
  vertical-align: baseline;
  padding: 5px 15px 5px 6px;
  background-color: #c1ffc1;
  border: 1px solid #3f3f3f;
  text-align: center;
  color: #000000;
  font-size: 16px;
  font-weight: bolder;
}
.pre_dataintable td {
  /* vertical-align: text-top; */
  padding: 5px 8px 5px 8px;
  border: 1px solid #aaa;
  text-align: left;
}
/* 表格内按钮 */
.pre_dataintable td button {
  width: 80px;
  padding: 6px 6px 6px 6px;
  border: 1px solid #aaa;
  text-align: center;
  display: inline-block;
}
/* 表格内输入框 */
.pre_dataintable td input {
  width: 100%;
  height: 100%;
  border: 0px;
  text-align: left;
  padding: 2px 2px 2px 2px;
  /* font-size: 16px; */
}

.pre_dataintable tr {
  cursor: pointer;
}
.pre_dataintable tr:nth-child(odd) {
  background-color: #f5f5f5;
}
.pre_dataintable tr:nth-child(even) {
  background-color: #fff;
}
.pre_dataintable tr:hover {
  background-color: #e2fde2;
}

.tab_add {
  width: 95%;
  display: flex;
  margin-top: 5px;
  margin-left: 2%;
  background-color: rgba(103, 233, 77, 0.644);
}
.tab_upd {
  width: 95%;
  display: flex;
  margin-left: 2%;
  background-color: rgba(209, 212, 36, 0.644);
}

/* 翻页样式 */
.pre_page {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.pre_page > ul {
  text-align: right;
  list-style: none;
}
.pre_page > ul > li > a {
  text-decoration: none;
}
.pre_page > ul > li > .go {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: 1px solid #cccccc;
  background: #024aee;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  margin-left: 5px;
}
.pre_page > ul > li > a:hover {
  color: #394656;
}
</style>

调用部分

<template>
  <div class="mydiv">
    <h2>Table插件測試</h2>
    <pre-table ref="file_table" @tab-event="refresh_data" :api_url="load_url" :pre_post="load_json">
      <!-- 设定标题  -->
      <template slot="tab_title">
        <tr>
          <th style="display:none;">ID</th>
          <th>上传用户</th>
          <th>文件名称</th>
          <th>文件类型</th>
          <th>文件大小</th>
          <th>上传时间</th>
          <th>操作</th>
        </tr>
      </template>
      <!-- user 相当于一个wrapper,容器，是自己定义的 -->
      <!-- user.item 对应 子组件的  :item="data_tr" 这里 item -->
      <!-- table可以封装到 表格,数据加载,刷新,分页 只需要传入URL就可以了 具体的增删改业务 单独完成 -->
      <template slot="tab_tr" slot-scope="user">
        <tr>
          <td style="display:none;">{{ user.item.id }}</td>
          <td class="td_name">{{ user.item.username }}</td>
          <td>{{ user.item.upfile_name }}</td>
          <td class="td_type">{{ user.item.upfile_type }}</td>
          <td>{{ user.item.upfile_size }}</td>
          <td>{{ user.item.sys_date }}</td>
          <td style="text-align: center;">
            <button @click="fun_add()">增加</button>&nbsp;
            <button @click="fun_del(user.item.id)">删除</button>&nbsp;
            <button @click="fun_upd(user.item.id)">修改</button>
          </td>
        </tr>
      </template>
      <!-- 构建新增模板 -->
      <template slot="tab_add">
        <!-- <h2>名称：</h2>
        <input type="text" v-model="upd_upfile_name" />
        <button @click="fun_save('add')">保存新增</button>-->
        <tr>
          <td style="display:none;"></td>
          <td>
            <input type="text" v-model="t_username">
          </td>
          <td>
            <input type="text" v-model="t_name">
          </td>
          <td>
            <input type="text" v-model="t_type">
          </td>
          <td>
            <input type="text" v-model="t_size">
          </td>
          <td></td>
          <td style="text-align: center">
            <button @click="fun_save('add')">保存新增</button>
          </td>
        </tr>
      </template>
      <!-- 构建修改模板 -->
      <template slot="tab_upd">
        <tr>
          <td style="display:none;"></td>
          <td>
            <input type="text" v-model="t_username">
          </td>
          <td>
            <input type="text" v-model="t_name">
          </td>
          <td>
            <input type="text" v-model="t_type">
          </td>
          <td>
            <input type="text" v-model="t_size">
          </td>
          <td></td>
          <td style="text-align: center">
            <button @click="fun_save('upd')">保存修改</button>
          </td>
        </tr>
      </template>
    </pre-table>
  </div>
</template>

<script>
import { GetShort, BackSpecial } from "@/utils/localstore.js";
// 这个是把postjson数据过程封装起来
import { tab_file_select } from "@/utils/loadhttpdata.js";

export default {
  components: {
    "pre-table": () => import("./personmode/pre_table.vue")
  },
  data() {
    return {
      load_url: "",
      load_json: "",
      upd_upfile_name: "",
      t_username: "",
      t_name: "",
      t_type: "",
      t_size: ""
    };
  },
  created: function() {
    this.loaddata();
  },
  methods: {
    loaddata: function() {
      this.load_url = "/Data_Back";
      this.load_json = tab_file_select("", "1");
    },
    refresh_data: function(page, keyword) {
      console.log("刷新结果page=" + page + " keyword=" + keyword);
      this.load_url = "/Data_Back";
      this.load_json = tab_file_select(keyword, page);
    },
    fun_add: function() {
      // 展示新增位置
      this.$refs.file_table.data_add();
    },
    fun_del: function(id) {
      console.log("删除 id=" + id);
    },
    fun_upd: function(id) {
      // 展示修改位置
      this.$refs.file_table.data_upd();
    },
    fun_save: function(type) {
      console.log("操作：" + type + " 内容" + this.upd_upfile_name);
    }
  }
};
</script>
<style scoped>
.td_type {
  width: 200px;
  height: 20px;
  /* white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word; */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

运行结果

f4edbf4cebfd7c4d60a4b9c0a36702f43e1.jpg

转载于:https://my.oschina.net/qingqingdego/blog/3026537

weixin_34227447
关注
vue element-ui table 组件封装使用
06-07
以下是对“vue element-ui table 组件封装使用”这一主题的详细讲解。 首先，我们来看标题中的“vue element-ui table 组件封装”。封装意味着将通用的功能集中到一个单独的模块或组件中，使得在多个地方重复使用时...
推荐7款优秀的vue table数据表格组件
热门推荐
CamphorBlossom的博客
03-07 1万+
数据表格（datatable ）组件旨在为Web 应用程序上表示和操作表格数据提供一种简单方便的解决方案。它允许用户以灵活、强大的方式过滤、格式化、分页、编辑、排序、添加和删除其数据。
Vue组件解析：自定义表格组件ByTable详解
weixin_48723799的博客
06-19 3450
ByTable是一个通用的Vue表格组件，用于展示数据并提供分页功能。它具有灵活的配置选项和插槽，可以满足不同场景下的表格需求。本文介绍了Vue组件ByTable的用法和属性配置，以及如何通过自动请求接口和分页功能实现数据的获取和展示。通过合理配置表头、插槽和相关属性，你可以根据具体需求创建灵活的表格组件。
vue封装原生table表格方法
最新发布
苦瓜_小学生的博客
06-26 1232
有若干个表格，前面几列格式不一致，但是后面几列格式皆为占一个单元格，所以需要封装表格，表格元素自动根据数据结构生成即可；并且用户可新增列数据。vue封装原生table表格方法。单元格格式会有很多种情况，可能会占几行，也可能会占几列，所以就需要控制着每个单元格的colspan和rowspan；单元格的内容长短不一致所以也需要控制着单元格的宽度；
封装简单的table组件
qq_48109675的博客
12-09 1924
​ 1、封装一个table组件（子） 子用prop接收传过来的数据：表头数据、表体数据等 若子需要向父传递事件则用$emit 2、使用table的组件（父） 在子标签上绑定传过去的数据 3、配置表头数据（个人习惯觉得代码更清晰） 将表头数据独自创建的js中 ​
vue组件封装——公用基础table组件
h_jQuery的博客
12-05 3635
vue公用基础表格组件封装案例
vue封装table组件---万能表格！
yc603740749的博客
10-12 6781
vue封装table组件---万能表格！
Element + Vue 封装的table组件
12-07
首先，我们要理解Vue组件化开发的核心思想。Vue组件是可复用的Vue实例，它们可以独立地完成特定的功能。在本案例中，开发者将Element UI的`el-table`和`el-pagination`组件进行了封装，创建了一个自定义的`bTable`...
封装Vue Element的table表格组件的示例详解
10-14
本文将深入探讨如何封装一个自定义的Vue Element table表格组件，以提高代码复用性和灵活性。 首先，封装组件的一个主要目标是抽象出通用的功能，使得在不同的场景下，只需传入特定的配置即可完成表格的渲染。Vue的...
vue3企业级项目二次封装el-table、分页
06-28
1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注...
基于Vue+element-ui 的Table二次封装的实现
10-18
1. **组件定义**：创建一个新的Vue组件，引入Element-UI的`el-table`和必要的列组件，如`el-table-column`。在示例代码中，我们看到`com-table`组件包含了表格的标题、选择列、以及带有插槽的自定义列。 2. **使用...
vue + element-ui二次封装Table组件，实现表格内容的完全自定义
qq_16139383的博客
03-20 9453
vue + element-ui二次封装Table组件，实现表格内容的完全自定义 前言 我们在用vue + element-ui写后台管理系统项目时，table组件应该是用的频率非常高的组件之一，但是我们不希望每次都使用element-ui的表格代码，秉着代码可读性和可复用性的原则，我们需要对element的table组件进行二次封装。 1、新建table.vue页面 <template&g...
【Vue3】el-table 组件二次封装，看这一篇就够了
m0_68271787的博客
02-28 3695
然而，数据的 key 作为列名的情况很少（至少在我们这里，一般是使用中文作为列名的），这就需要我们使用可定制的列名，并且，如果我们不想展示某些字段，上面的写法也是做不到的（它会显示数据的所有字段）。这时候，我们只需要一个映射（mapper）就可以解决这些问题。该对象的每一个属性对应每一列的 prop、key，值对应列的列名 label。javascript。
Element-UI对Table表格的简单封装
qq_44552416的博客
02-14 2646
问题描述：我们再开发中有时候会遇到相同功能表格，这个时候会将表格进行封装拆分处理。这里暂时记录一下简单的封装，加上一些必要的属性，其他属性有需要再加上去。 1，Table子组件 <template> <div class="TableGrid"> <el-table header-row-class-name="table-list-header" row-class-name="table-list-row" :max-heig
Vue3表格（Table）
Mr Dear的博客
04-17 9487
展示行列表格数据，支持：加载中；暂无数据；设置各行文本样式自定义；总之，功能丰富，简单易用😁😁
Vue 学习随笔系列三 - 表格组件使用
mm_0123456789的博客
04-03 1580
【代码】Vue 学习随笔系列三 - 表格组件使用。
Vue前端的一些表格组件的思考
XiaoCai
08-28 1692
vue表格组件的一些汇总，包括自己实现复合表头。Vue easytable、Vue Good Table、Vue vxe-table和Tabulator的基本介绍
一个功能强大、好看的vue表格组件
成长的足迹
10-20 6850
这是支持Vue 3/Vue 2的一个表格组件，支持表格增删改、虚拟表格、复杂表格、树形表格、数据校验、懒加载、分页、弹窗、单元格样式设置、按钮自定义样式、表头样式、单元格合等功能。好了，组件就给大家介绍到这边了，更多的具体功能，大家可以自己去实践。1、支持Vue3.0、Vue2.0版本，2.0版本已暂停升级。组件兼容各大浏览器、高效整洁的API设计、模块化表格。今天给大家推荐一个好用、强大的Vue表格扩展组件。4、支持按需加载、扩展接口。
移动端 vue table 组件简单封装
qq_37309987的博客
01-17 1687
思考：习惯了UI库的使用，渐渐对组件背后的东西缺乏探索，在写table组件的时候，发现经常使用的组件，其实写起来并不容易，这激起了一丢丢对UI库源码的好奇心，希望我能将这份好奇心付之行动，也希望下次再进行分享时，可以是对某个UI组件源码学习的分享。4、index.vue页面代码。
Vue+element-ui Table组件封装实践
"本文主要介绍了如何基于Vue.js和Element-UI库进行Table组件的二次封装，以实现数据管理系统的统一表格样式和功能。作者在公司产品升级的过程中，从后端开发转为前端开发，需要处理大量的表格展示和交互，因此决定对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值