Значения сортировки элементов пользовательского интерфейса в таблице не работают

Question

Я пытаюсь сделать простую функцию сортировки, но она не работает.

var Main = {
  data() {
    return {
      tableData: [{
        value: '1.799,37',
        name: 'Tom 3'
      }, {
        value: '2.183,88',
        name: 'Tom 2'
      }, {
        value: '3.837,05',
        name: 'Tom 4'
      }, {
        value: '769,8',
        name: 'Tom 6'
      }, {
        value: '111,8',
        name: 'Tom 6'
      }, {
        value: '999,8',
        name: 'Tom 6'
      }]
    }
  },
  methods: {
    test: function(a, b) {
      return a.value - b.value;
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@1.3.4/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.4/lib/index.js"></script>
<div id="app">
  <template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="value" label="Value" sortable :sort-method=test width="180"></el-table-column>
    <el-table-column prop="name" sortable label="Name" width="180"></el-table-column>
  </el-table>
</template>
</div>

Answer 1

В вашем массиве tableData каждый объект имеет value, который является строкой. Итак, ваш метод сортировки при сравнении строк. Но здесь, я думаю, вы хотите отсортировать их по номеру.

Что вам нужно сделать, так это обновить свой метод следующим образом:

methods: {
  test: function(a, b) {
    return this.toFloat(a.value) - this.toFloat(b.value)
  },
  toFloat: function(num) {
    return parseFloat(num.replace('.','').replace(',','.'))
  }
}

Обратите внимание, что replace должен сделать ваши строки действительными номера

var Main = {
  data() {
    return {
      tableData: [{
        value: '1.799,37',
        name: 'Tom 3'
      }, {
        value: '2.183,88',
        name: 'Tom 2'
      }, {
        value: '3.837,05',
        name: 'Tom 4'
      }, {
        value: '769,8',
        name: 'Tom 6'
      }, {
        value: '111,8',
        name: 'Tom 6'
      }, {
        value: '999,8',
        name: 'Tom 6'
      }]
    }
  },
  methods: {
    test: function(a, b) {
      return this.toFloat(a.value) - this.toFloat(b.value)
    },
    toFloat: function(num) {
      return parseFloat(num.replace('.','').replace(',','.'))
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@1.3.4/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.0.11/lib/index.js"></script>
<div id="app">
  <template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="value" label="Value" sortable :sort-method=test width="180"></el-table-column>
    <el-table-column prop="name" sortable label="Name" width="180"></el-table-column>
  </el-table>
</template>
</div>