vue中不要element-ui时实现table的各列排序根据数组决定实现方法

昨天写了一篇table表格的各列根据数组决定排序的文章，但是有人不使用element-ui，现在写一下原始的table表格实现此功能

问题说明：用数组fileds决定各列的展示顺序，比如说fileds=

[ 

                {key:"name",value:"姓名"},

                {key:"address",value:"地址"},

                {key:"sex",value:"性别"},

                {key:"vipLevel",value:"会员级别"},

                {key:"isCanHasStore",value:"是否可开店"},

            ]

时表格的展示形式是这样的 姓名在第一列

假如现在我改变数组的顺序 fileds=

[ 

                {key:"address",value:"地址"},

                {key:"name",value:"姓名"},

                {key:"sex",value:"性别"},

                {key:"vipLevel",value:"会员级别"},

                {key:"isCanHasStore",value:"是否可开店"},

            ]

此时列表中地址就会在第一列

实现思路：

表头要根据数组fileds进行循环展示，这是肯定的，其次就是tbody中的各列要确定怎样把数据列表tableData中数据的各个属性和fileds中的key值对应上

可以根据循环按照fileds的循环顺序去循环出多个td来，这样td中的展示内容就可以把fileds中的key值作为tableData中对象的属性名来取值了

代码如下

如果想看使用element-ui时的实现方式可查看博客

https://blog.csdn.net/suiersuier/article/details/107185450