vue js 2 테이블 정렬

vue js 2 테이블 정렬

vue.param 2에 관한 2가지 질문과 여기에 https://jsfiddle.net/tmun9cxa/1/가 있습니다.

1. 열 머리글을 클릭하면 정렬이 작동하지 않는 이유는 무엇입니까?해결책은 무엇일까?

2. 검색 입력 필드에 pn 열만 검색하려면 어떻게 해야 합니까?

지금까지 발견된 많은 예에서는 vue1을 사용하고 있으며 최신 버전이 아닙니다.

<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 여기

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

지적된 바와 같이 컬럼 정렬은 사용할 필요가 있기 때문에 작동하지 않았습니다.a[col]대신a.col

또한 원래 데이터를 수정하는 대신 계산된 값을 사용하는 것도 고려해야 합니다.이것에 의해, 필터링도 용이하게 됩니다.

갱신된 스크립트입니다(주의:<tr v-for="(product) in products">할 필요가 있다<tr v-for="(product) in showProducts">이 기능을 하기 위해서)

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

마지막으로 바이올린: https://jsfiddle.net/tmun9cxa/2/

언급URL : https://stackoverflow.com/questions/50374892/vue-js-2-sorting-a-table