Vue表格数据筛选排序

最新推荐文章于 2024-05-15 14:47:51 发布

年轻即出发

最新推荐文章于 2024-05-15 14:47:51 发布

阅读量2.1k

点赞数 1

分类专栏： Vue

原文链接：https://blog.csdn.net/y_silence_/article/details/82496339

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue练习</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        .box{
            text-align: center;
        }
        .box>span{
            color: red;
            font-size: 18px;
        }
        .table-top{
            margin-top: 20px;
            text-align: center;
            margin-bottom: 40px;
        }
        .table-content{
            margin:0 auto;
        }
        .table-content span{
            background: #ff9900;
            padding: 0 6px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box" class="box">
    <div class="table-top">
        <input type="text" v-model="searchVal"><button>搜索</button>
    </div>
    <table border="1px" class="table-content">
        <tr>
            <th>商品名</th>
            <th>单价
                <span @click="orderFn('price', false)">↑</span>
                <span @click="orderFn('price', true)">↓</span>
            </th>
            <th>销量
                <span @click="orderFn('sales', false)">↑</span>
                <span @click="orderFn('sales', true)">↓</span>
            </th>
        </tr>
        <tr v-for='(item, key) in list'>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.sales}}万</td>
        </tr>
    </table>
    <span>总价: {{ total }} 元</span>
    </div>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#box',
        data:{
            goodsList:[
                {name:'三星-s8',price:5600,sales:1.2},
                {name:'锤子-坚果pro',price:2500,sales:0.8},
                {name:'iphone-6s',price:4300,sales:3.2},
                {name:'iphone-7',price:5200,sales:2.6}
            ],
            searchVal:'',    //默认输入为空
            letter:'',       //默认不排序 // 排序字段
            original:false,   //默认从小到大排列
            total:0 //默认总价
        },
        methods:{
            orderFn(letter,original){
                this.letter = letter; //排序字段
                this.original = original; //排序方式
            }
        },
        // 通过计算属性过滤数据
        computed:{
            list: function() {
                var _this = this;
                // 筛选
                var arrGoods = [];
                for (var i = 0;i < this.goodsList.length; i++)
                {
                    // 如果匹配成功, 向空数组添加数据
                    if (this.goodsList[i].name.search(this.searchVal) != -1) {
                        arrGoods.push(this.goodsList[i]);
                    }
                }

                // 升序降序排列
                // false:升序  true:降序
                if (this.letter != '') {
                    arrGoods.sort(function(a,b){
                        if(_this.original){
                            return b[_this.letter] - a[_this.letter];
                        }else{
                            return a[_this.letter] - b[_this.letter];
                        }
                    });
                }
                _this.total = 0;
                for (var i = 0;i < arrGoods.length; i++){
                    _this.total += arrGoods[i].price;
                }
                return arrGoods;
            },
            total: function(){
                return this.total;
            }
        }
    });
</script>
</html>

年轻即出发

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue表格数据筛选排序

目录代码案例 v-model v-on v-for 计算属性 sort()方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue练习</title> <style type="text...
复制链接

扫一扫