给table自动添加序号及转换数据

在显示数据时，会遇到一种情况，就是接收到的数据需要转换一下才能达到展示效果，比如说自动添加序号，转换0或1等

自动添加序号实现方式

1.在一般的html页面中，通过操作dom可以实现。根据数据长度建立一个循环，把以此循环出的数通过操作dom，写入用选择器选到的相应dom节点

2.在使用框架的情况下，如果是用v-for循环的组件，可以直接获取其中的index值，写入到相应的元素当中。

3.可以定义一个数据，在函数中定义方法，通过在绑定元素的位置直接绑定方法，而方法直接返回数字的形式来写入序号

4.列表中，在可以循环实现表头的框架中，可以使用rander函数来生成数据。

5.在一些框架中，序号的type设置为index就可以自定添加数据。

6.通过绑定formatter来写入数据。但此方法不推荐使用。因为当进行任何相关的操作时都会再次出发函数，序号会不受控制的向上加

转换数据状态的方法：

1.列表中，在可以循环实现表头的框架中，可以使用rander函数来生成数据。

2.vue框架中，可以使用过滤器和计算属性来实现。

3.通过formatter来格式化数据

4.一般html页面中可以通过操作dom来实现相关操作

5.在接收数据的时候，可以使用循环把需要的数据进行一下修改，使其可以符合自己的需求。当然在提交或者其他操作需要用到该值的时候还需反向把其反转回来。

我对于formatter不太熟悉，也是在遇到问题查找资料的时候发现的，所以做下笔记记录一下。

formatter方式

<el-table-column prop="sex" label="是否有效" width="100" :formatter="formatSex" sortable>
</el-table-column>

methods: {
//性别显示转换
formatSex: function (row, column) {
    return row.status == 1 ? '有效' : row.status == 0 ? '无效' : '未知';
},
           

过滤器方式

{{scope.row.status | formatStatus}}
           

filters: {
     formatStatus: function (val) {
        console.log(val)
        return val == 1 ? '上架' : val == 2 ? '下架' : '未知';
    },
},