vue动态创建删除表格

最新推荐文章于 2023-03-16 11:05:36 发布

逆风优雅

最新推荐文章于 2023-03-16 11:05:36 发布

阅读量227

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44603011/article/details/118546997

版权

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>
    .top{
        width:600px;
        height: 30px;
        border: 1px solid black;
        line-height: 30px;
        border-collapse: collapse;
    }
     tr{
        border: 1px solid black;
    }
     td,th{
        border: 1px solid black;
        line-height: 30px;
    }
    input{
        outline: none;
        color: gray;
    }
    .top1,.top2{
        margin-bottom: 20px;
    }
    th{
        background-color: greenyellow;
    }
    #footer{
        width: 600px;
        text-align: center;
        line-height: 30px;
    }
   #tbody td{
    text-align: center;

   }
</style>
<body>
    <div id="app">
        <table class="top top1">
            <tr>
                <td>
                    编号：<input type="text" v-model='text_value'>
                    品牌名称：<input type="text" v-model='input_value'>
                    <button @click='addFn' :disabled="text_value&&input_value?false:true" >添加</button>
                </td>
            </tr>
        </table>
        <table class="top top2"> 
            <tr>
                <td>

                    品牌名称：<input type="text" value="请输入搜索条件">
                </td>
            </tr>
        </table>
        <table class="top">
            <thead>
                <tr>
                    <th>{{bianHao}}</th>
                    <th>{{pinPai}}</th>
                    <th>{{shiJian}}</th>
                    <th>{{caoZuo}}</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr v-for='(item,index) in arr' :key='item.id'>
                    <td>{{item.bianhao}}</td>
                    <td>{{item.mingCheng}}</td>
                    <td>{{item.time}}</td>
                    <td><button @click='del(index)'>删除</button></td>
                    <!-- del()中传入一个参数，为index -->
                </tr>
            </tbody>
        </table>
        <div id="footer" v-show='!arr.length'>没有更多数据</div>
    </div>
</body>
</html>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            text_value:'',
            input_value:'',
            bianHao:'编号',
            pinPai:'品牌名称',
            shiJian:'创立时间',
            caoZuo:'操作',
            arr:[{ 
                id:1,
                bianhao:1,
                mingCheng:'大碗面',
                time:new Date().toLocaleString(),
            },{
                id:2,
                bianhao:2,
                mingCheng:'大碗面',
                time:new Date().toLocaleString(),
            }]
        },
        methods:{
          addFn(){
            console.log(this.text_value);
            //做一个判断，如果输入的值不为空则，创建一个对象
            if(this.text_value&&this.input_value){
                
                //新键一个对象，
                let newArr = {
                    id:Math.random().toString(32).substr(2), //生成一个唯一的值，用于:key
                    bianhao:this.text_value,
                    mingCheng:this.input_value,
                    time:new Date().toLocaleString(),
                }
                console.log(this.arr);
                // 将这个新建的对象添加到数组中
                this.arr.push(newArr)
                // 当点击完成后，让他们的值为空
                this.text_value='',
                this.input_value=""
            }
          },
          del(i){
               //截取字符串
               console.log(i);
               this.arr.splice(i,1)
           }
        },
    }) 
</script>

逆风优雅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue动态创建删除表格

<!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>Do.
复制链接

扫一扫