使用vue的组件，来写一个表格

最新推荐文章于 2023-11-30 20:31:14 发布
weighless1129
最新推荐文章于 2023-11-30 20:31:14 发布
阅读量371
点赞数
文章标签： vue.js javascript 前端
本文链接：https://blog.csdn.net/weighless/article/details/130682798
版权
在全局注册一个组件。该组件是负责展示表格数据的。
该页面可以在前端进行删除和查找
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>田贵梯组件间传值</title>
    <style>
        body{
            width: auto;
            height: 300px;
            text-align: center;

        }
        #app{
            margin: auto;
            display: inline-block;
        }
        button{
            height: 30px;
            width: 60px;
            border-radius: 5px;
            border: 0;
            color:#ffffff;
            background-color:deepskyblue;
        }
        td{
            width: 100px;
            font-size: x-small;
            text-align: left;
        }
        .selectMod{
            text-align: left;
        }
        .selectMod input{
            height: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
   
    <div id="app">   
       <div class="selectMod">
        名称 
        <input v-model="seleData">
        <button @click="select">查找</button>
       </div>
        <my-component :items="viewData" :price="prices" ></my-component>      
    </div>
   
     
    <script src="vue.js"></script>
    <script>

        Vue.component('my-component',{
        
            props:['items','price'],
            template:`
            <table border="2" cellspacing="0">
                <tr >
                    <td >
                      <h5>ID</h5>
                      </td >
                     <td >
                        <h5>主标题</h5>
                      </td >
                      <td >
                        <h5>起步价格</h5>
                      </td > 
                      <td >
                        <h5>显示</h5>
                      </td >
                      <td >
                        <h5>操作</h5>
                    </td >
                 </tr>
                
                 <tr  v-for="item in items" >
                    <td >
                       {{item.id}}
                      </td >
                     <td >
                       {{item.title}}
                      </td >
                      <td >
                       {{item.price_info}}
                      </td > 
                      <td >
                       {{item.is_show}}
                      </td >
                      <td >
                      <button @click="link(item.id)" >删除</button>
                    </td >
                 </tr>

                 <tr> 
                    <td colspan="5" text-align=right >
                        总价为：￥{{price}}
                    </td> 
                </tr>
             </table>
            `,
            methods:{
                link(deleteid){
                    var r=confirm("确定删除id为"+deleteid+"的记录吗");
                        if (r==true)
                        {
                            for(let i=0;i<this.items.length;i++){
                            let item = this.items[i]
                            if(item.id==deleteid){
                                this.items.splice(i,1)
                            }
                        }
                        }
                        else
                        {
                           alert("取消删除")
                        }
                      
                    }
            }
        })

        new Vue({
            el:'#app',
            data:{
                seleData:"",//展示数据
                prices:0,//总价格
                viewData:[],//子组件表格数据
                tableData:[{
                        "id": 287,
                        "title": "严选新式样板间",
                        "price_info": 29.9,
                        "is_show": 1
                    }, {
                        "id": 286,
                        "title": "无“油”无虑的甜蜜酥脆",	
                        "price_info": 45,
                        "is_show": 1
                    }, {
                        "id": 283,
                        "title": "孩子成长中少不了的一双鞋",
                        "price_info": 78,
                        "is_show": 1
                    }, {
                        "id": 282,
                        "title": "成就一室笋香1",
                        "price_info": 121,
                        "is_show": 1
                    }, {
                        "id": 281,
                        "title": "条纹新风尚",
                        "price_info": 29,
                        "is_show": 1
                    }, {
                        "id": 277,
                        "title": "治愈生活的满怀柔软",
                        "price_info": 66.78,

                        "is_show": 1
                    }, {
                        "id": 274,
                        "title": "没有软木拖，怎么过夏天",
                        "price_info": 50.99,
                        "is_show": 1
                    }, {
                        "id": 272,
                        "title": "料理也要精细简单",
                        "price_info": 69,
                        "is_show": 1
                    }, {
                        "id": 271,
                        "title": "选式新懒人",
                        "price_info": 15.3,
                        "is_show": 1
                    }, {
                        "id": 268,
                        "title": "米饭好吃的秘诀：会呼吸的锅",
                        "price_info": 20.1,
                        "is_show": 1
                    }]
            },
            methods:{
                select(){
                    let num=0
                    let price=0
                    this.viewData=[]
                    for(let i=0;i<this.tableData.length;i++){
                        let item = this.tableData[i]
                       if(item.title.indexOf(this.seleData)>0){
                          this.viewData[num]=item
                          price+=item.price_info
                          num++
                       }
                    }
                    if(this.viewData.length==0){
                        alert("抱歉没有您要找的记录")
                        this.viewData=this.tableData
                    for(let i =0; i<this.tableData.length;i++){
                    let item = this.tableData[i];
                    this.prices+=item.price_info    
                }
                    }else{
                        this.prices=price
                    }
                    
                }
            },
            mounted(){
                console.log(this.tableData)
                this.viewData=this.tableData
                for(let i =0; i<this.tableData.length;i++){
                    let item = this.tableData[i];
                    this.prices+=item.price_info    
                }
                this.prices=this.prices.toFixed(2)
                 console.log(this.prices)
        
    }

        });
    </script>
</body>
<script>
</script>
</html>