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

代码:

HTML部份

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <style>
    .warp{
      width: 900px;
      padding: 20px;
      margin: 0 auto;
    }
    .gridtable{
      float: left;
    }
    table{
      margin-top: 5px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-collapse: collapse;
    }
    table th {
      background-color: #dedede;
    }
    table tr td,
    table tr th {
      border: 1px solid #ccc;
      padding: 8px;
    }
    table.gridtable tbody:nth-child(odd){
      background-color: #dedede;
    }
    table.gridtable tbody:hover{
      background-color: #ccc;
    }
    .form-operate{
      float: left;
      margin-top: 20px;
      padding-left: 30px;
    }
    .form-operate input{
      margin-bottom: 10px;
    }
    </style>
  </head>
  <body>
    <div class="warp" id="app">
      <div  class="gridtable">
        <table>
            <thead>
              <tr>
                <th><input type="checkbox" v-model="allcheck" @change="checkAll"/>全选</th>
                <template v-for="(item,index) in columns">
                  <th @click="sort(item.filed)">{{item.title}}</th>
                </template>
                <th>操纵</th>
              </tr>
            </thead>
            <tbody  v-for="(col,index) in datas" :key="index">
              <tr>
                <td><input type="checkbox" v-model="checkItem[index]"/>{{index+1}}</td>
                
                <template v-for="(item,index) in columns">
                  <td>{{col[item.filed]}}</th>
                </template>
                <td>
                  <button @click="edit(index)">编辑</button>
                  <button @click="deleted(index)">删除</button>
                </td>
                
              </tr>
            </tbody>
        </table>
      </div>
      <div class="form-operate">
        <label for="name">姓名: 
          <input  id="name" type="text" v-model.trim="form.name">
        </label> 
        <br/>
        <label for="age">岁数: 
          <input  id="age" type="text" v-model.trim="form.age">
        </label>
        <br/>
        <label for="gender">性别: 
          <input  id="gender" type="text" v-model.trim="form.gender">
        </label>
        <br/>
        <label for="hobby">兴趣: 
          <input  id="hobby" type="text" v-model.trim="form.hobby">
        </label>
        <br/>
        <button @click="save">保留</button>
        <button @click="add">新增</button>

      </div>    
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
  <script type="text/javascript" src="./index.js"></script>
</html>

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;
      })
    })
  }
});

感兴趣的,能够给颗小心心或许一个大拇指~~

    原文作者:Just_do
    原文地址: https://segmentfault.com/a/1190000015733702
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞