master

分支 (1)

管理

管理

master

vue-test
/
7、循环练习.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" width="50%" cellspacing="0">
            <thead><tr><th>编号</th><th>姓名</th><th>工资</th><th>状态</th><th>操作</th></tr></thead>
            <tbody>
                <tr v-for="(e,index) in employeeList">
                    <td>{{e.id}}</td>
                    <td>{{e.name}}</td>
                    <td>{{e.money}}</td>
                    <td>{{e.status}}</td>
                    <td>
                        <input type="button" value="离职" v-if="e.status == '在职'" @click="e.status = '离职'">
                        <input type="button" value="删除" @click="del(index)">
                        <input type="button" value="修改" @click="updateObj = e" v-if="e.status == '在职'">
                    </td>
                </tr>
            </tbody>
        </table>
        <select v-model="sortInfo">
            <option value="id">编号</option>
            <option value="money">工资</option>
        </select>
        <input type="button" value="排序" @click="sortEmployee">

        添加员工
            编号：<input type="text" v-model="id"><span style="color:red" v-if="addInfo.length != 0">{{addInfo}}</span><br>
            姓名：<input type="text" v-model="name"><br>
            工资：<input type="text" v-model="money"><br>
            <input type="button" value="添加" @click="add">
        <hr>
        修改员工<br>
            编号：{{updateObj.id}}<br>
            姓名：{{updateObj.name}}<br>
            工资：<input type="text" v-model="updateObj.money"><br>
            状态：{{updateObj.status}}

    </div>

    <script>
        // var employeeList=[{"id":10,name:"张三",money:6000,status:"在职"},
        //     {"id":8,name:"李四",money:3000,status:"在职"},
        //     {"id":9,name:"王五",money:4500,status:"离职"},
        //     {"id":6,name:"赵不凡",money:10000,status:"在职"},
        //     {"id":15,name:"刘江",money:8000,status:"在职"},];
        // var sortMethod = (sortName,isDesc)=>(a,b)=>{
        //     if(isDesc == true) {
        //         return b[sortName] - a[sortName]
        //     }
        //     else{
        //         return a[sortName] - b[sortName]
        //     }
        // };

        // employeeList.sort(sortMethod("money"));
        //
        // // employeeList.sort(function (a,b) {
        // //     return b.money-a.money;
        // // })
        // //
        // alert(JSON.stringify(employeeList));

        var vueObj = new Vue({
            el:"#app",
            data:{
                sortInfo:"money",
                updateObj:{},
                id:"",
                name:"",
                money:"",
                addInfo:"",
                employeeList:[{"id":10,name:"张三",money:6000,status:"在职"},
                    {"id":8,name:"李四",money:3000,status:"在职"},
                    {"id":9,name:"王五",money:4500,status:"离职"},
                    {"id":6,name:"赵不凡",money:10000,status:"在职"},
                    {"id":15,name:"刘江",money:8000,status:"在职"},]
            },
            methods:{
                add(){
                    var index = this.employeeList.findIndex((n) => n.id==this.id);
                    if(index != -1){
                        this.addInfo = "该编号已存在";
                        return;
                    }
                    else{
                        this.addInfo = "";
                    }

                    this.employeeList.push({id:this.id,name:this.name,money:this.money,status:"在职"});
                    this.id = "";
                    this.name="";
                    this.money = "";
                },
                del(index){
                    // alert(index);

                    this.employeeList.splice(index,1);
                },
                sortEmployee(){
                    var sortMethod = (sortName)=>(a,b)=> b[sortName] - a[sortName];
                    this.employeeList.sort(sortMethod(this.sortInfo));
                }
            }
        });
    </script>
</body>
</html>