无法重复排序第二次vuejs

时间：2016-08-28 03:07:00

标签： javascript sorting vue.js

我正在尝试在vuejs表组件中启用排序，其中行在单击第th项时排序，到目前为止，排序机制在第一次点击时工作，但第二次，表中的项目失败排序。 

var columns = 
[{
	name: 'Type',
	key: 'type',
    sortOrder: 1,
    callback: function(item) {
      if(item.type = 'issue')
         return '<i class="fa fa-bars"></i> I-'+item.id;
      else
         return '<i class="fa fa-check-square-o"></i> R-'+item.id;
    }
},
{
	name: 'Name',
	key: 'name',
    sortOrder: 1
},
{
	name: 'Created On',
	key: 'created_at',
    sortOrder: 1
},
{
	name: 'Due Date',
	key: 'due_date',
    sortOrder: 1
},
{
	name: 'Priority',
	key: 'priority',
    sortOrder: 1
},
{
	name: 'Assigned To',
	key: 'email',
    sortOrder: 1
},
{
	name: 'Severity',
	key: 'severity',
    sortOrder: 1
},
{
	name: 'Workflow',
	key: 'workflow',
    sortOrder: 1
}];

var data = [{
    id: 81,
    name: "a",
    workflow: "backlog",
    created_at: "1",
    user_id: 1,
    due_date: "04:09:19	2016-08-06",
    severity: "se",
    priority: "1",
    type: "1",
    email: "sdfds@gmail.com"
}, {
    id: 83,
    name: "Add files or images",
    workflow: "deployed",
    created_at: "2016-08-01 03:09:19",
    user_id: 5,
    due_date: "2016-08-06",
    severity: "Major",
    priority: "1",
    type: "issue",
    email: "test@gmail.com"
}];



Vue.config.debug= true;

Vue.component('testnetic-table', {
   template: '#testnetic-table',
	 props: ['data', 'columns'],
     data: function() {
        return {
           searchKey: '',
           sortKey: ''
        };
     },
	 methods: {
      sortBy: function(index) {         
         this.columns[index].sortOrder = this.columns[index].sortOrder * -1;  
         this.sortKey = this.columns[index].key;
      },
       display: function(item,key,index) {
         if(this.columns[index].callback){
           return this.columns[index].callback(item); 
         }           
         else
            return item[key];
       }
     }
});



new Vue({
  el: '#test',
  data: function() {
    return {
      columns: columns,
      data: data
    } 
  }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"
  </head>

  <body>
   
<script type="text/x-template" id="testnetic-table">
	<input type="text" v-model="searchKey">
	<table class="table table-hover table-light table-responsive">
		<thead>
			<tr>
				<th v-for="item in columns"
				 		@click="sortBy($index)">
				 		{{ item.name | capitalize}}
				 	  <i class="fa" :class="item.sortOrder > 0 ? 'fa-sort-desc' : 'fa-sort-asc'"></i>
				</th>			
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in data
                | filterBy searchKey
                | orderBy sortKey columns[$index].sortOrder"
              >
              <td v-for="cell in columns"> 
                {{{ display(item,cell.key,$index)}}}
              </td>
            </tr>
		</tbody>
	</table>
</script>

<div id="test">
  <testnetic-table
  :columns="columns"
  :data="data"
  ></testnetic-table>
</div>

  </body>
 
</html>

1 个答案:

答案 0 :(得分：0)

您需要在与sortOrder相同的级别定义sortKey。单击列时，

  1. 如果列已经是sortKey，则反转列的sortOrder（否则，设置sortKey）
  2. 无论如何，请从列sortOrder
    3. 中设置sortOrder

    ＆＃13;
    ＆＃13; 
    var columns = [{
  name: 'Type',
  key: 'type',
  sortOrder: 1,
  callback: function(item) {
    if (item.type = 'issue')
      return '<i class="fa fa-bars"></i> I-' + item.id;
    else
      return '<i class="fa fa-check-square-o"></i> R-' + item.id;
  }
}, {
  name: 'Name',
  key: 'name',
  sortOrder: 1
}, {
  name: 'Created On',
  key: 'created_at',
  sortOrder: 1
}, {
  name: 'Due Date',
  key: 'due_date',
  sortOrder: 1
}, {
  name: 'Priority',
  key: 'priority',
  sortOrder: 1
}, {
  name: 'Assigned To',
  key: 'email',
  sortOrder: 1
}, {
  name: 'Severity',
  key: 'severity',
  sortOrder: 1
}, {
  name: 'Workflow',
  key: 'workflow',
  sortOrder: 1
}];

var data = [{
  id: 81,
  name: "a",
  workflow: "backlog",
  created_at: "1",
  user_id: 1,
  due_date: "04:09:19	2016-08-06",
  severity: "se",
  priority: "1",
  type: "1",
  email: "sdfds@gmail.com"
}, {
  id: 83,
  name: "Add files or images",
  workflow: "deployed",
  created_at: "2016-08-01 03:09:19",
  user_id: 5,
  due_date: "2016-08-06",
  severity: "Major",
  priority: "1",
  type: "issue",
  email: "test@gmail.com"
}];



Vue.config.debug = true;

Vue.component('testnetic-table', {
  template: '#testnetic-table',
  props: ['data', 'columns'],
  data: function() {
    return {
      searchKey: '',
      sortKey: '',
      sortOrder: -1
    };
  },
  methods: {
    sortBy: function(index) {
      const col = this.columns[index];
      if (this.sortKey === col.key) {
        col.sortOrder *= -1;
      } else {
        this.sortKey = this.columns[index].key;
      }
      this.sortOrder = col.sortOrder;
    },
    display: function(item, key, index) {
      if (this.columns[index].callback) {
        return this.columns[index].callback(item);
      } else
        return item[key];
    }
  }
});



new Vue({
  el: '#test',
  data: function() {
    return {
      columns: columns,
      data: data
    }
  }
});
    ＆＃13; 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"> </head>

  <body>

    <script type="text/x-template" id="testnetic-table">
      <input type="text" v-model="searchKey">
      <table class="table table-hover table-light table-responsive">
        <thead>
          <tr>
            <th v-for="item in columns" @click="sortBy($index)">
              {{ item.name | capitalize}}
              <i class="fa" :class="item.sortOrder > 0 ? 'fa-sort-desc' : 'fa-sort-asc'"></i>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data
                | filterBy searchKey
                | orderBy sortKey sortOrder">
            <td v-for="cell in columns">
              {{{ display(item,cell.key,$index)}}}
            </td>
          </tr>
        </tbody>
      </table>
    </script>

    <div id="test">
      <testnetic-table :columns="columns" :data="data"></testnetic-table>
    </div>

  </body>

</html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题