element-ui 中的可排序问题
sortable issue in element-ui
我已经使用 Element-ui 编写了 table 代码。我需要列 sortable,但是它不起作用。我不知道是什么原因。是不是数据格式不对?
非常感谢
<el-table v-loading="listLoading" :data="list">
<el-table-column type="selection" > </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"}
]
要使排序正常工作,您需要将数据中的键传递给属性,即 prop="number" in el-table -列。例如。如果要对数字列进行排序。您需要添加 prop="number" 或您想要对应于数组中用于 table
的数据的任何键
<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" > </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 编写了 table 代码。我需要列 sortable,但是它不起作用。我不知道是什么原因。是不是数据格式不对?
非常感谢
<el-table v-loading="listLoading" :data="list">
<el-table-column type="selection" > </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"}
]
要使排序正常工作,您需要将数据中的键传递给属性,即 prop="number" in el-table -列。例如。如果要对数字列进行排序。您需要添加 prop="number" 或您想要对应于数组中用于 table
的数据的任何键<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" > </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>