vue js 2 对表格进行排序 [英] vue js 2 sorting a table

问题描述

我对 vue.js 2 有 2 个问题，这里有一个小提琴:https://jsfiddle.net/tmun9cxa/1/

1. 当您单击列标题时，为什么我的排序不起作用?有什么解决办法?

2. 如何让搜索输入字段只搜索 pn 列?

我发现的很多例子都使用了 vue1 并且已经过时了.

<table style="text-align: center;"><头><tr><th v-for="列中的列">{{column.label}}</a></th></tr></thead><tr v-for="(product) in products"><td>{{product.pn}}</td><td>{{product.od}}</td><td>{{product.id}}</td><td>{{product.thickness}}</td><td>{{product.lo}}</td><td>{{product.weight}}</td></tr></tbody>

这里是javascript

var vm = new Vue({el: '#app',数据: {当前排序:'pn'，currentSortDir: 'asc',搜索: ''，列: [{标签:'P/N'，简码:'pn'}，{标签:'OD(De，mm)'，简码:'od'}，{ label: 'ID (De,mm)', 简码: 'id' },{ label: 'Thickness (De,mm)', 简码: 'thickness' },{标签:'LO'，简码:'lo'}，{标签:'重量(公斤/1000)'，简码:'重量'}，]，//列产品: [{电话:170158，外径:13，编号:.44，厚度:1，低:.45，重量:0.7},{电话:1803561，外径:12，编号:.8，厚度:.7，低:.11，重量:0.5},{电话:170149，外径:9，编号:.64，厚度:0.6，低:.75，重量:0.3},{电话:150149，外径:15，编号:.22，厚度:0.3，低:0.55，重量:.9},]，//产品},方法: {排序:函数(列){//console.log('current:'+this.currentSort);//console.log('col:'+col);//var colthing = col;//如果你点击同一个标签两次if(this.currentSort == col){console.log( 'same col: '+col );//按升序排序this.products = this.products.sort((a, b) => {返回 a.col >= b.col;});}别的{this.currentSort = col;console.log( 'diff col: '+col );//按降序排序this.products = this.products.sort((a, b) => {返回 a.col <= b.col;});}//万一}，//种类}，//方法});//视图

解决方案

正如所指出的，列排序不起作用，因为您需要使用 a[col] 而不是 a.col

此外，您应该考虑使用计算值而不是修改原始数据.这也让过滤变得更容易.

这是更新后的脚本(注意<tr v-for="(product) in products">需要是<tr v-for="(product)) 在 showProducts"> 中使用)

var vm = new Vue({el: '#app',数据: {当前排序:'pn'，currentSortDir: 'asc',搜索: ''，列: [{标签:'P/N'，简码:'pn'}，///更多列...]，//列产品: [//.... 对象]，//产品},计算:{显示产品(){返回 this.products.filter(a => {控制台日志(a.pn)返回 (a.pn + '').includes(this.search)}).sort((a, b) => {如果 (this.currentSortDir === 'asc') {返回 a[this.currentSort] >= b[this.currentSort];}返回 a[this.currentSort] <= b[this.currentSort];})},},方法: {排序:函数(列){//如果你点击同一个标签两次if(this.currentSort == col){this.currentSortDir = this.currentSortDir === 'asc' ?'desc' : 'asc';}别的{this.currentSort = col;console.log( 'diff col: '+col );}//万一}，//种类}，//方法});//vue

最后，小提琴:https://jsfiddle.net/tmun9cxa/2/

I have 2 questions with vue.js 2 and a fiddle here: https://jsfiddle.net/tmun9cxa/1/

1. When you click a column header, why does my sorting not work? What is the solution?

2. How do I go about making the search input field search only the pn column?

A lot of the examples ive found are using vue1 and out of date.

<input type="text" value="" v-model="search" placeholder="Search">

<table style="text-align: center;">
    <thead>
        <tr>
            <th v-for="column in columns">
                <a 
                    href="#"
                    v-on:click="sort(column.shortcode)">{{column.label}}
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(product) in products">
            <td>{{product.pn}}</td>
            <td>{{product.od}}</td>
            <td>{{product.id}}</td>
            <td>{{product.thickness}}</td>
            <td>{{product.lo}}</td>
            <td>{{product.weight}}</td>
        </tr>
    </tbody>
</table>

javascript here

var vm = new Vue({
        el: '#app',
        data: {
            currentSort: 'pn',
            currentSortDir: 'asc',
            search: '',
            columns: [
                { label: 'P/N', shortcode: 'pn' },
                { label: 'OD (De,mm)', shortcode: 'od' },
                { label: 'ID (De,mm)', shortcode: 'id' },
                { label: 'Thickness (De,mm)', shortcode: 'thickness' },
                { label: 'LO', shortcode: 'lo' },
                { label: 'Weight (kg/1000)', shortcode: 'weight' },
            ], // columns
            products: [
                { 
                    pn: 170158,
                    od: 13,
                    id: .44,
                    thickness: 1,
                    lo: .45,
                    weight: .7
                },{ 
                    pn: 1803561,
                    od: 12,
                    id: .8,
                    thickness: .7,
                    lo: .11,
                    weight: .5
                },{ 
                    pn: 170149,
                    od: 9,
                    id: .64,
                    thickness: .6,
                    lo: .75,
                    weight: .3
                },{ 
                    pn: 150149,
                    od: 15,
                    id: .22,
                    thickness: .3,
                    lo: .55,
                    weight: .9
                },
            ], // products
        },
        methods: {
            sort:function(col) {
                //console.log( 'current: '+this.currentSort );
                //console.log( 'col: '+col );
                //var colthing = col;

                // if you click the same label twice
                if(this.currentSort == col){
                    console.log( 'same col: '+col );
                    // sort by asc
                    this.products = this.products.sort((a, b) => {
                        return a.col >= b.col;
                    });
                }else{
                    this.currentSort = col;
                    console.log( 'diff col: '+col );
                    // sort by desc
                    this.products = this.products.sort((a, b) => {
                        return a.col <= b.col;
                    });
                } // end if

            }, // sort

        }, // methods
    }); // vue

解决方案

the column sorting , as pointed out, was not working because you need to use a[col] instead of a.col

Also, you should consider using a computed value instead of modifying the original data. This makes filtering easier too.

here is the updated script (note that <tr v-for="(product) in products"> needs to be <tr v-for="(product) in showProducts"> for this to work)

var vm = new Vue({
  el: '#app',
  data: {
    currentSort: 'pn',
    currentSortDir: 'asc',
    search: '',
    columns: [
      { label: 'P/N', shortcode: 'pn' },
      /// more columns ...
    ], // columns
    products: [
      //.... objects
    ], // products
  },
  computed: {
    showProducts() {
      return this.products.filter(a => {
        console.log(a.pn)
        return (a.pn + '').includes(this.search)
      })
        .sort((a, b) => {
        if (this.currentSortDir === 'asc') {
	        return a[this.currentSort] >= b[this.currentSort];      
        }
        return a[this.currentSort] <= b[this.currentSort];
      })
    },
  },
  methods: {
    sort:function(col) {
      // if you click the same label twice
      if(this.currentSort == col){
        this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
      }else{
        this.currentSort = col;
        console.log( 'diff col: '+col );
      } // end if

    }, // sort

  }, // methods
}); // vue

finally, the fiddle: https://jsfiddle.net/tmun9cxa/2/

这篇关于vue js 2 对表格进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！