1幻易云-湖北十堰高防云服务器 4H4G15M月付88元6982Zbolg插件免登录购买插件免授权破解版5013蓝易云-11月推广得现金红包-最高奖励1000元！65542022年最新wordpress主题破解版本Zibll子比主题V6.5最新完美破解版 全网首发 站长亲测9635CentOS系统怎么设置自动连接网络，图文教程详解810
注册登录

vue2 table 页面 + 功能 展示

马肤
这是懒羊羊

 

首页代码 


  
    测试跳转
    
    
    
      
    
    
      新增内容
      
        
          
            
              
            
            
              
                
                
                
              
            
            
              
                
                
                
                
              
            
            
              
                
              
            
            
              
            
            
              立即创建
              
            
          
        
        类型：
        
          
            请选择类型
            
          
          
            统建
            自建
            应用支撑
          
        
        状态：
        
          
            请选择状态
            
          
          
            立项
            进行
            验收
            结束
          
        
        
          日期筛选：
          
        
      
      
        
          
          
          
          
          
            
              查看进展
            
          
          
          
          
            
              查看
              编辑
              删除
            
          
        
        
        
        
          
            
确定删除吗？

          
          
            取消
            删除
          
        
        
        
          
            
              
            
            
              
                
                
                
              
            
            
              
                
                
                
                
              
            
            
              
                
              
            
            
              
            
          
          
            取消
            保存
          
        
        
        
          
            
              
            
            
              
                
                
                
              
            
            
              
                
                
                
                
              
            
            
              
                
              
            
            
              
            
          
          
            
            关闭
          
        
        
          
            
              {{ activity.content }}
            
          
          
            关闭
          
        
      
    
  

  
import daily from "./daily.vue";
import { fetchData } from "../api/index";
import { deleteData } from "../api/index";
import { editData } from "../api/index";
import { selectbytypeData } from "../api/index";
import { addData } from "../api/index";
export default {
  components: {
    daily,
 
  },
  data() {
    return {
      // 删除
      deletedata: false,
      value1: "",
      total: 0,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      // 查看
      browse: false,
      updateVisible: false,
      updateContent: "",
      adddialogVisible: false,
      editForm: {},
      params: {
        type: "",
        status: "",
        page: 1,
        size: 10,
        startDate: "",
        endDate: "",
      },
      form: {
        projectName: "",
        projectType: "",
        projectStatus: "",
        expectedEndTime: "",
        projectContent: "",
      },
      rules: {
        projectName: [{ required: true, message: "请填写项目名称" }],
        projectType: [{ required: true, message: "请选择项目类型" }],
        projectStatus: [{ required: true, message: "请选择项目状态" }],
        expectedEndTime: [
          { required: true, message: "请选择项目预计结束时间" },
        ],
        projectContent: [{ required: true, message: "请选择项目描述" }],
      },
      reverse: true,
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
    };
  },
  computed: {
    currentPageData() {
      const start = this.currentPage * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },
  methods: {
    // 跳转
    dailys(row) {
      window.open("http://localhost:8080/#/daily/");
    },
    // 类型
    handleCommand(command) {
      // console.log("选中的值为:", command);
      document.getElementById("type1").innerText = command;
      this.params.type = command;
      // console.log(this.params);
      // 在这里可以对选中的值进行处理
      selectbytypeData("/projects/search", this.params).then((response) => {
        // 请求成功处理
        // console.log(response.data.content);
        this.tableData = response.data.content;
        for (let index = 0; index  {
        // 请求成功处理
        // console.log(response.data.content);
        this.tableData = response.data.content;
        for (let index = 0; index  {
        // 请求成功处理
        // console.log(response.data.content);
        this.tableData = response.data.content;
        for (let index = 0; index  {
        // 请求成功处理
      });
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
      this.deletedata = false; // 关闭对话框
    },
    // 删除 弹框
    showDeleteDialog(row) {
      this.currentRowData = row; // 将当前行的数据保存到 currentRowData
      this.deletedata = true; // 打开对话框
    },
    // 保存按钮
    saveEdit(editForm) {
      // 在这里保存编辑后的数据
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          editData("/projects", this.editForm.id, this.editForm)
            .then
            // response => {
            //   // 请求成功处理
            // }
            ();
          this.dialogVisible = false;
          window.location.reload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.params.page = val;
      console.log(this.params, " this.params.page ");
      if (this.value1) {
        this.params.startDate = this.value1[0];
        this.params.endDate = this.value1[1];
      }
      fetchData("/projects", this.params).then((response) => {
        // 请求成功处理
        const currentPage = this.params.page;
        this.currentPage = currentPage;
        this.tableData = response.data.content;
        for (let index = 0; index  {
        if (valid) {
          addData("/projects", this.form);
          this.adddialogVisible = false;
          window.location.reload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    // 获取信息
    fetchData("/projects", this.params).then((response) => {
      // 请求成功处理
      this.params.page = this.currentPage;
      this.tableData = response.data.content;
      console.log(response, "首次获取数据");
      for (let index = 0; index  td.el-table__cell,
.el-table__body tr td {
  background-color: #fff !important;
}
.imgnew {
  margin: 90px auto;
}
.el-button--small {
  font-size: 15px !important;
}
.btnnew {
  border: none !important;
  font-size: 22px !important;
  font-weight: bold !important;
  padding: 0 15px !important;
}
#myButton {
  opacity: 0.5; /* 置灰 */
  pointer-events: none; /* 禁止点击 */
}

接受路由参数页面

  
    
    
      
    
    
      
        
项目名称: {{ this.projectName }}

        
项目类型: {{ this.projectType }}

        
项目状态: {{ this.projectStatus }}

        
项目时间: {{ this.expectedEndTime }}

        
项目描述: {{ this.projectContent }}

      
      
        
          
            
          
          
            
          
          
            
          
          
            
              选择文件
            
          
          
            
              
            
          
          
            立即创建
          
        
      
      新增内容
      
        
        
        
          
            
              {{ scope.row.title }}
          
        
        
        
          
            查看
            编辑
            删除
          
        
      
      
      
        
          
确定删除吗？

        
        
          取消
          删除
        
      
      
      
        
          
            
          
          
            
          
          
            
          
          
            
              选择文件
              
                只允许上传一个文件，请删除原文件后再上传
              
            
          
          
            
              
            
          
        
        
          取消
          保存
        
      
      
      
        
          
            
          
          
            
          
          
            
          
          
            
              选择文件
              
                只允许上传一个文件，请删除原文件后再上传
              
            
          
          
            
              
            
          
        
        
          关闭
        
      
      
        
          
            {{ activity.content }}
          
        
        
          关闭
        
      
    
  

    
import { fetchData } from "../api/detail";
import { deleteData } from "../api/detail";
import { editData } from "../api/detail";
import { selectbytypeData } from "../api/detail";
import { addData } from "../api/detail";
export default {
  data() {
    return {
      // 删除
      deletedata: false,
      namefu: [],
      namefuArray: [],
      routerdata: "",
      dataParam: "",
      // 查看
      browse: false,
      projectName: "",
      projectType: "",
      projectStatus: "",
      expectedEndTime: "",
      projectContent: "",
      fileList: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      updateVisible: false,
      updateContent: "",
      adddialogVisible: false,
      id: "",
      editForm: {},
      params: {
        type: "",
        status: "",
        page: 1,
        size: 10,
      },
      form: {
        projectId: "",
        title: "",
        description: "",
        attachment: "",
        responsiblePerson: "",
        // projectStatus: "",
        updateTime: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        responsiblePerson: [
          { required: true, message: "请输入负责人姓名", trigger: "change" },
        ],
        updateTime: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
      },
      reverse: true,
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
    };
  },
  computed: {},
  methods: {
    // 附件
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      this.fileList = [];
      this.fileList = response;
      this.form.attachment = response;
      console.log(this.form.attachment);
    },
    handleError() {
      "文件上传失败";
    },
    // 图片弹框
    showAddDialog() {
      this.adddialogVisible = true;
    },
    // 查看
    browses(row) {
      // console.log(row,'nihO')
      this.editForm = Object.assign({}, row);
      this.browse = true;
    },
    // 编辑 按钮
    handleEdit(row) {
      this.editForm = Object.assign({}, row);
      //   this.editForm.attachment = "111";
      console.log(row.attachment);
      if (row.attachment) {
        const obj = {};
        obj.name = row.attachment.substring(52);
        obj.url = row.attachment;
        this.fileList = [];
        this.fileList.push(obj);
      }
      this.dialogVisible = true;
    },
    // 删除 弹框
    showDeleteDialog(row) {
      this.currentRowData = row; // 将当前行的数据保存到 currentRowData
      this.deletedata = true; // 打开对话框
    },
    // 删除 按钮
    handleDelete(row) {
      const index = this.tableData.indexOf(row);
      // console.log("row is", row.id);
      deleteData("/project-updates", row.id).then((response) => {
        // 请求成功处理
      });
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
      this.deletedata = false; // 关闭对话框
    },
    // 保存  编辑
    saveEdit(form) {
      // 在这里保存编辑后的数据
      console.log("保存编辑后的数据", this.editForm.id);
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.editForm.attachment=this.fileList;
          this.projectId = this.$route.params.id;
          console.log(this.projectId);
          console.log(form, "from");
          editData("/project-updates", this.editForm.id, this.editForm).then(
            (response) => {
              // 请求成功处理
            }
          );
          this.dialogVisible = false;
          window.location.reload();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.params.page = val;
      fetchData(
        "/project-updates/projectPage",
        this.$route.params.id,
        this.params
      ).then((response) => {
        // 请求成功处理
        const currentPage = this.params.page;
        this.currentPage = currentPage;
        this.tableData = response.data.content;
        for (let index = 0; index  {
        if (valid) {
          // alert("submit!");
          this.form.projectId = this.id;
          // this.form.attachment=this.fileList;
          addData("/project-updates", this.form);
          this.adddialogVisible = false;
          window.location.reload();
          console.log(this.form, "this.form");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    fetchData(
      "/project-updates/projectPage",
      // 接受上一个页面传过来的路由值
      this.$route.params.id,
      this.params
    ).then((response) => {
      if (response) {
        // 请求成功处理
        console.log(response.data,'response');
        this.tableData = response.data.content;
        this.routerid = this.$route.params.id;
        this.routerdata = this.$route.query.data;
        this.projectName = JSON.parse(this.routerdata).projectName;
        this.projectType = JSON.parse(this.routerdata).projectType;
        this.projectStatus = JSON.parse(this.routerdata).projectStatus;
        this.expectedEndTime = JSON.parse(this.routerdata).expectedEndTime;
        this.projectContent = JSON.parse(this.routerdata).projectContent;
        for (let index = 0; index  td.el-table__cell,
.el-table__body tr td {
  background-color: #fff !important;
}
.imgnew {
  margin: 90px auto;
}
.el-button--small {
  font-size: 15px !important;
}
.btnnew {
  border: none !important;
  font-size: 22px !important;
  font-weight: bold !important;
  padding: 0 15px !important;
}

api页面

import axios from 'axios';
const BASE_URL = 'http://192.168.1.1:10020';
const api = axios.create({
    baseURL: BASE_URL,
    timeout: 10000,
    headers: {
        'Access-Control-Allow-Origin': "*"
    }
});
// ----------------- 日报--------------------------------
//获取全部数据，分页情况params是分页参数page size
export const dailyfetchData = (endpoint, params) => {
    return api.get(`${endpoint}?page=${params.page}&size=${params.size}`);
};
//新增
export const dailyaddData = (endpoint, params) => {
    console.log('api')
    return api.post(endpoint, params);
};
//删除 
export const dailydeleteData = (endpoint, id) => {
    return api.delete(`${endpoint}/${id}`);
};
//修改
export const dailyeditData = (endpoint, id, params) => {
    return api.put(`${endpoint}/${id}`, params);
};
// -------------------------------------------------
//获取全部数据，分页情况params是分页参数page size
export const fetchData = (endpoint, params) => {
    return api.get(`${endpoint}?page=${params.page}&size=${params.size}`);
};
//删除
export const deleteData = (endpoint, id) => {
    return api.delete(`${endpoint}/${id}`);
};
//修改
export const editData = (endpoint, id, params) => {
    return api.put(`${endpoint}/${id}`, params);
};
//查询
export const searchData = (endpoint, id) => {
    return api.get(`${endpoint}/${id}`);
};
//新增
export const addData = (endpoint, params) => {
    return api.post(endpoint, params);
};
//通过类型查询
export const selectbytypeData = (endpoint, params) => {
    if (!params.status && params.type && params.startDate) {
        return api.get(`${endpoint}?type=${params.type}&startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);
    } else if (!params.type && params.status && params.startDate) {
        return api.get(`${endpoint}?status=${params.status}&startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);
    } else if (!params.startDate && params.type && params.status) {
        return api.get(`${endpoint}?type=${params.type}&status=${params.status}&page=${params.page}&size=${params.size}`);
    } else if (!params.status && !params.type && params.startDate) {
        return api.get(`${endpoint}?startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);
    } else if (!params.status && !params.startDate && params.type) {
        return api.get(`${endpoint}?type=${params.type}&page=${params.page}&size=${params.size}`);
    } else if (!params.type && !params.startDate && params.status) {
        return api.get(`${endpoint}?status=${params.status}&page=${params.page}&size=${params.size}`);
    } else {
        return api.get(`${endpoint}?type=${params.type}&status=${params.status}&startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);
    }
    // return api.get(`${endpoint}?type=${params.type}&status=${params.status}&startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);
};

 router页面

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    beforeEnter: (to, from, next) => {
      document.title = '信息化项目管理系统';
      next();
    },
    component: () => import(/* webpackChunkName: "about" */ '../views/MyVue.vue')
  },
  {
    path: '/daily',
    name: 'daily',
    beforeEnter: (to, from, next) => {
      document.title = '信息化项目管理系统';
      next();
    },
    component: () => import(/* webpackChunkName: "about" */ '../views/daily.vue')
  },
  {
    path: '/progess/:id',
    name: 'progess',
    beforeEnter: (to, from, next) => {
      document.title = '信息化项目管理系统';
      next();
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/progess.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router

相关阅读：

1、替换FeedBurner邮件为Follow.it

2、使用正则表达式进行中文排版

3、Windows 10下注册32位OCX控件的方法

4、小储云商城V1.78破解版

5、wordpress阿里百xiu主题破解版

文章版权声明：除非注明，否则均为VPS857原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

  • 麻将计分器：简单的微信小程序开发
  • uniapp 微信小程序 获取用户头像和昵称
  • 微信小程序使用MQTT的小例子
  • 微信小程序——实现对话模式（调用大模型图片生成）
  • 微信小程序——自定义底部tabBar
  • 微信小程序使用腾讯云COS对象存储保存图片和文件(1)
  • 微信小程序(一)：微信小程序实现底部导航菜单
  • 解决微信小程序报错：request 合法域名校验出错 如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“详情-域名信息”的方法

    • 发表评论

    快捷回复：表情：
    评论列表 （暂无评论，0人围观）

    还没有评论，来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码