Question

我已经使用Element-ui编写了表代码。我需要可排序的列，但是它不起作用。我不知道是什么原因。数据格式错误吗？

太棒了

<el-table v-loading="listLoading" :data="list">
  <el-table-column type="selection" >&nbsp;</el-table-column>
  <el-table-column label="NO" fixed width="100" sortable><template slot-scope="scope">{{ scope.row.number }}</template></el-table-column>
  <el-table-column v-for="head in formThead" :key="head.value" :label="head.title" :min-width="head.celwidth ==null ? 100: head.celwidth" :sortable="head.sortable">
    <template slot-scope="scope">
      {{ scope.row[head.value] }}
    </template>
  </el-table-column>
</el-table>


formThead: [
    { value: 'dest', title: 'Dest', celwidth: 110, sortable: true }, { value: 'date', title: 'Date' }, { value: 'pcs', title: 'PCS', celwidth: 80 }],

list：[
  {"number": "2", "dest": "AAA", "date": "2019-01-01", "pcs": "2"},
  {"number": "3", "dest": "ABB", "date": "2019-01-02", "pcs": "1"},
  {"number": "4", "dest": "CAA", "date": "2019-02-11", "pcs": "3"},
  {"number": "6", "dest": "DEA", "date": "2019-03-01", "pcs": "5"}
 ]

Answer 1

要使排序有效，您需要将密钥从数据传递给prop，即 el-table-column 中的 prop =“ number” 。例如。如果要对Number列进行排序。您需要添加prop =“ number”或要与用于表的数组中的数据相对应的任何键

<el-table-column label="NO" prop="number" fixed width="100" sortable>
    <template slot-scope="scope">{{scope.row.number}}</template>
</el-table-column>

使用另一列排序对代码提供完整解决方案

<el-table v-loading="listLoading" :data="list">
      <el-table-column type="selection" >&nbsp;</el-table-column>
      <el-table-column label="NO" fixed width="100" prop="number" sortable><template slot-scope="scope">{{ scope.row.number }}</template></el-table-column>
      <el-table-column v-for="head in formThead" :key="head.value" :prop="head.value" :label="head.title" :min-width="head.celwidth ==null ? 100: head.celwidth" :sortable="head.sortable">
        <template slot-scope="scope">
          {{ scope.row[head.value] }}
        </template>
      </el-table-column>
</el-table>

element-ui

1 个答案: