表格增删改---排序 ---全选全不选反选-----金山前端面试题

AbnerMing 发布于2019-08-29 16:07 / 937人阅读

摘要：代码部分全选操作编辑删除姓名年龄性别爱好保存新增部分姓名年龄性别爱好小花小军小坤小新您确定要保存修改吗感兴趣的，可以给颗小心心或者一个大拇指

代码：

HTML部分



  
    
    
    
    
  
  
    
      
        
            
              
                全选
                
                操作
              
            
            
              
                {{index+1}}
                
                
                
                  
                  
                
                
              
            
        
      
      
        姓名： 
          
         
        

        年龄： 
          
        
        

        性别： 
          
        
        

        爱好：

全选	{{item.title}}	操作
{{index+1}}	{{col[item.filed]}}

js部分

new Vue({
  el:"#app",
  data() {
    return {
      allcheck: false,
      search: "",
      checkItem:[],
      columns: [
        {
          title: "姓名",
          filed: "name"
        }, {
          title: "年龄",
          filed: "age"
        }, {
          title: "性别",
          filed: "gender"
        }, {
          title: "爱好",
          filed: "hobby"
        }
      ],
      form:{
        id: "",
        name: "",
        age: "",
        gender: "",
        hobby: ""
      },
      datas: [
        { 
          id: "1",
          name: "小花",
          age: "15",
          gender: "woman",
          hobby: "coding"
        }, {
          id: "2",
          name: "小军",
          age: "18",
          gender: "man",
          hobby: "sleeping"
        }, {
          id: "3",
          name: "小坤",
          age: "8",
          gender: "man",
          hobby: "shopping"
        }, {
          id: "4",
          name: "小新",
          age: "28",
          gender: "woman",
          hobby: "singing"
        }
      ]
    }
  },
  watch:{
    checkItem: {
        handler(val) {
            const hasfalse = this.checkItem.includes(false);
            if(hasfalse) {
                this.allcheck = false;
            }else{
                this.allcheck = true;
            }
        },
        deep: true
    },
    datas: {
        handler(val) {
            return val
        },
        deep: true
    }
  },
  methods: {
    edit(param) {
      const form = this.datas[param];
      this.form = Object.assign({},this.form,form);
    },
    deleted(param) {
      this.checkItem.splice(param,1);
      this.datas.splice(param,1);
    },
    save() {
      let result = window.confirm("您确定要保存修改吗？");
      if(result) { 
        let id = this.form.id;
        let index = this.datas.findIndex(item => {return item.id == id});
        const newitem = Object.assign({},this.form);
        this.datas.splice(index,1,newitem);
      }else {
       return 
      }
    },
    checkAll() {
      if(this.allcheck) {
        this.checkItem = this.datas.map(item => {
            return true;
        })
      }else{
        this.checkItem = this.datas.map(item => {
          return false;
        })  
      }
    },
    sort(param) {
        this.datas.sort(function (obj1, obj2) {
            if (obj1[param] > obj2[param]) {
                return 1;
            } else if (obj1[param] === obj2[param]) {
                return 0;
            } else {
                return -1;
            }
          }
        )
    },
    add() {
      let ids = this.datas.map( item => {
          return item.id;
      })
      let idmax = Math.max(ids);
      this.form.id = ++idmax;
      this.allcheck = false;
      this.datas.push(this.form);
      this.checkItem.push(false);
    }
  },
  created() {
    this.$nextTick(() => {
      this.checkItem = this.datas.map( item => {
        return false;
      })
    })
  }
});

感兴趣的，可以给颗小心心或者一个大拇指~~

服务器托管 idc机房托管增删改大数据增删改实现增删改查登录增删改查

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113534.html

fsLayui介绍(layui插件)

摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。 fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载码云下载测试环境地址：http://fslayui.itcto.cn 为什么要使用fsLa...

Barry_Ng 2019-08-22 11:16 评论0 收藏0
Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查

摘要：最近在做毕设，同学在做前端页面的时候使用到和这些控件，然后自己又在刷题的时候遇到一个这个的实现，于是就自己去官网文档上学习了一下，尝试实现这个官方文档代码代码效果如下图示顶部结构页面上的三个，增删改新增修改删除这里的框的最近在做毕设，同学在做前端页面的时候使用到JQuery、DataTable和Bootstrap这些控件，然后自己又在刷题的时候遇到一个这个demo的实现，于是就自己去...

oneasp 2019-08-22 18:28 评论0 收藏0
Vue+Mock.js模拟登录和表格的增删改查

摘要：表示需要拦截的请求类型。表示数据模板，可以是对象或字符串。表示用于生成响应数据的函数。指向本次请求的选项集。生成规则是可选的。返回成功的数据，就是登录成功了，否则相反。模拟登录接下来介绍模拟表格增删改查。前言关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据，模拟各种场景。 5...

coordinate35 2019-08-23 10:25 评论0 收藏0
Vue+Mock.js模拟登录和表格的增删改查

摘要：表示需要拦截的请求类型。表示数据模板，可以是对象或字符串。表示用于生成响应数据的函数。指向本次请求的选项集。生成规则是可选的。返回成功的数据，就是登录成功了，否则相反。模拟登录接下来介绍模拟表格增删改查。前言关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据，模拟各种场景。 5...

Tony_Zby 2019-08-05 14:32 评论0 收藏0
MySQL: 表的增删改查（基础）

摘要：注释在中可以使用空格描述来表示注释说明即增加查询更新删除四个单词的首字母缩写。 1.CRUD 注释：在SQL中可以使用–空格+描述来表示注释说明CRUD 即增加...

RobinTang 2021-11-22 09:34 评论0 收藏0
Spring Boot 中使用 MongoDB 增删改查

摘要：声明构造函数，作用是把从数据库取出的数据实例化为对象。该构造函数传入的值为从中取出的数据省略接口提供增删改查接口实现提供增删改查接口实现提供了一个类似于的设计的类。本文快速入门,MongoDB 结合SpringBoot starter-data-mongodb 进行增删改查 1、什么是MongoDB ? MongoDB 是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。...

ranwu 2019-06-26 17:34 评论0 收藏0