恢复厂家设计按钮js方法

效果图：

 

 

 代码如下：

<template>

  <el-button size="mini" @click="mysort()">取消排序</el-button>

</template>

<script>

export default {

  data() {

    return {

      oldcol: [

        {

          label: "姓名",

          prop: "name",

          show: true,

          order: 1

        },

        {

          label: "年龄",

          prop: "age",

          show: true,

          order: 2

        },

        {

          label: "身高",

          prop: "height",

          show: true,

          order: 3

        },

        {

          label: "体重",

          prop: "weight",

          show: true,

          order: 4

        },

        {

          label: "地址",

          prop: "address",

          show: true,

          order: 5

        }

      ],

      col: [

        {

          label: "姓名",

          prop: "name",

          show: true,

          order: 1

        },

        {

          label: "年龄",

          prop: "age",

          show: true,

          order: 2

        },

        {

          label: "身高",

          prop: "height",

          show: true,

          order: 3

        },

        {

          label: "体重",

          prop: "weight",

          show: true,

          order: 4

        },

        {

          label: "地址",

          prop: "address",

          show: true,

          order: 5

        }

      ]

    };

  },

  methods: {

    

 //copy(arry) {

    //   let newArry = [];

    //   for (let item of arry) {

    //     newArry.push(item);

    //   }

    //   return newArry;

    // },

    mysort() {

      //js 深入拷贝

      //1. 一招吃遍天下json 序列化-反序列方式

      this.col = JSON.parse(JSON.stringify(this.oldcol));

      //2.直接遍历 新建数组，遍历赋值

      //this.col = this.copy(this.oldcol);

      //3.slice()方法返回一个从已有的数组中截取一部分元素片段组成的新数组（不改变原始的数组）

      //this.col = this.oldcol.splice(0, this.oldcol.length);

      //4.concat() 方法用于连接两个或多个数组。（该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本）

      //this.col = this.oldcol.concat();

    }

  }

};

</script>