vue实现对表格数据的处理示例

最新推荐文章于 2024-08-23 20:23:30 发布

weixin_44340914

最新推荐文章于 2024-08-23 20:23:30 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44340914/article/details/108189731

版权

本文介绍了如何使用Vue处理表格数据，包括将数据存放在list列表中、实现数据的增加（通过push方法）、删除（依据id使用splice方法）以及查询功能（根据cname查找）。同时，也涉及了日期数据的处理，展示了最终的效果。

摘要由CSDN通过智能技术生成

<div class="course" id="course">
        <div class="panel">

            <label for="">序号：<input type="text" v-model="id"></label>
            <label for="">课程：<input type="text" v-model="cName"></label>
            <label for="">教师：<input type="text" v-model="teacher" @keyup.enter="add"></label>
            <input type="button" id="add" value=" 添 加 " @click="add">
            <label for="" class="search">搜索: <input type="text" v-model="keyword" @keyup="search(keyword)"></label>
        </div> 
        <div class="list">
            <table>
                <thead>
                    <tr>
                        <th class="firstCol">序号</th>
                        <th>课程</th>
                        <th>教师</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                //key保证数据的唯一性
                    <tr v-for="item in search(keyword)" :key="item.id">