一、数据准备

很久很久以前不知道表格的列还可以循环生成.....自打知道后，在项目中封装一个表格组件就可以一劳永逸啦！扯远啦，我们今天要实现的是表格的上移、下移以及删除功能。我用 vue 实现，当然你可以用原生啊、jQ啊、react啊等等来实现。

{
    "tableColumns": [
        {
            "prop": "uesrname",
            "label": "姓名",
            "sortable": true,
            "showOverflowTooltip": false,
            "width": "100"
        },
        {
            "prop": "age",
            "label": "年龄",
            "sortable": true,
            "showOverflowTooltip": false,
            "width": "100"
        },
        {
            "prop": "phone",
            "label": "电话号码",
            "sortable": false,
            "showOverflowTooltip": false,
            "width": "200"
        },
        {
            "prop": "character",
            "label": "性格",
            "sortable": false,
            "showOverflowTooltip": false,
            "width": "180"
        },
        {
            "prop": "score",
            "label": "成绩",
            "sortable": false,
            "showOverflowTooltip": false,
            "width": "80"

        },
        {
            "prop": "action",
            "label": "操作",
            "sortable": false,
            "showOverflowTooltip": false,
            "width": "140"
        }
    ]
}

二、代码实现

上上次的项目中，我们有类似这样的需求，当时是分配给了另外一个女生做，那比我今天模拟的例子更要复杂。我没做过，于是也来研究研究。嗯，永远保持一颗学习的赤诚之心。等我忙起来可能就没时间写了......

  <template>
  <el-table :data="tableData" style="width: 801px" header-align="center" border>
    <el-table-column
      v-for="(item, index) in tableColumns"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :sortable="item.sortable"
      :show-overflow-tooltip="item.showOverflowTooltip"
      align="center"
    >
      <template v-slot="{ row }">
        <span v-if="item.prop === 'action'">
          <span @click="moveUpHandler(row)">上移</span>
          <span @click="moveDownHandler(row)">下移</span>
          <span @click="deleteHandler(row)">删除</span>
        </span>
        <span v-else>{{ row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { tableColumns } from "../src/assets/columnData.json";
export default {
  data() {
    return {
      tableColumns,
      tableData: [
        {
          uesrname: "林小饼",
          age: 17,
          phone: 15212345678,
          character: "安静",
          score: "90",
          moveUp: false,
          moveDown: true,
          rowIndex: 0,
        },
        {
          uesrname: "林二饼",
          age: 18,
          phone: 15287654321,
          character: "沉稳",
          score: "100",
          moveUp: true,
          moveDown: true,
          rowIndex: 1,
        },
        {
          uesrname: "林大饼",
          age: 19,
          phone: 15266668888,
          character: "活泼",
          score: "95",
          moveUp: true,
          moveDown: false,
          rowIndex: 2,
        },
      ],
    };
  },
  methods: {
    moveUpHandler(rowData) {
      const { moveUp, rowIndex } = rowData;
      if (!moveUp || this.tableData.length === 1) return;
      this.tableData.splice(rowIndex, 1);
      this.tableData.splice(rowIndex - 1, 0, rowData);
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].rowIndex = i;
        this.tableData[i].moveUp = true;
        this.tableData[i].moveDown = true;
        // 数组第一组数据禁止上移
        this.tableData[0].moveUp = false;
        // 数组最后一组数据禁止下移
        this.tableData[this.tableData.length - 1].moveDown = false;
      }
    },
    moveDownHandler(rowData) {
      const { moveDown, rowIndex } = rowData;
      if (!moveDown || this.tableData.length === 1) return;
      this.tableData.splice(rowIndex, 1);
      this.tableData.splice(rowIndex + 1, 0, rowData);
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].rowIndex = i;
        this.tableData[i].moveUp = true;
        this.tableData[i].moveDown = true;
        // 数组第一组数据禁止上移
        this.tableData[0].moveUp = false;
        // 数组最后一组数据禁止下移
        this.tableData[this.tableData.length - 1].moveDown = false;
      }
    },
    deleteHandler(rowData) {
      const { rowIndex } = rowData;
      // 删除 法1
      // const res = this.tableData.filter((item) => item.rowIndex !== rowIndex);
      // this.tableData = res;
      // 删除 法2
      this.tableData.splice(rowIndex, 1);
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].rowIndex = i;
        this.tableData[i].moveUp = true;
        this.tableData[i].moveDown = true;
        // 数组第一组数据禁止上移
        this.tableData[0].moveUp = false;
        // 数组最后一组数据禁止下移
        this.tableData[this.tableData.length - 1].moveDown = false;
      }
    },
  },
};
</script>

三、代码优化

然后发现代码有些冗余，优化一下。

  <template>
  <el-table :data="tableData" style="width: 801px" header-align="center" border>
    <el-table-column
      v-for="(item, index) in tableColumns"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :sortable="item.sortable"
      :show-overflow-tooltip="item.showOverflowTooltip"
      align="center"
    >
      <template v-slot="{ row }">
        <span v-if="item.prop === 'action'">
          <span @click="moveUpHandler(row)">上移</span>
          <span @click="moveDownHandler(row)">下移</span>
          <span @click="deleteHandler(row)">删除</span>
        </span>
        <span v-else>{{ row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { tableColumns } from "../src/assets/columnData.json";
export default {
  data() {
    return {
      tableColumns,
      tableData: [
        {
          uesrname: "林小饼",
          age: 17,
          phone: 15212345678,
          character: "安静",
          score: "90",
          moveUp: false,
          moveDown: true,
          rowIndex: 0,
        },
        {
          uesrname: "林二饼",
          age: 18,
          phone: 15287654321,
          character: "沉稳",
          score: "100",
          moveUp: true,
          moveDown: true,
          rowIndex: 1,
        },
        {
          uesrname: "林大饼",
          age: 19,
          phone: 15266668888,
          character: "活泼",
          score: "95",
          moveUp: true,
          moveDown: false,
          rowIndex: 2,
        },
      ],
    };
  },
  methods: {
    // ◆上移
    moveUpHandler(rowData) {
      const { moveUp, rowIndex } = rowData;
      if (!moveUp || this.tableData.length === 1) return;
      this.tableData.splice(rowIndex, 1);
      this.tableData.splice(rowIndex - 1, 0, rowData);
      this.resetTableData(this.tableData)
    },
    // 下移
    moveDownHandler(rowData) {
      const { moveDown, rowIndex } = rowData;
      if (!moveDown || this.tableData.length === 1) return;
      this.tableData.splice(rowIndex, 1);
      this.tableData.splice(rowIndex + 1, 0, rowData);
      this.resetTableData(this.tableData)
    },
    // ◆删除
    deleteHandler(rowData) {
      const { rowIndex } = rowData;
      // 删除 法1
      // const res = this.tableData.filter((item) => item.rowIndex !== rowIndex);
      // this.tableData = res;
      // 删除 法2
      this.tableData.splice(rowIndex, 1);
      this.resetTableData(this.tableData)
    },
    // 封装重置表格的函数
    resetTableData(tableData) {
      for (let i = 0; i < tableData.length; i++) {
        tableData[i].rowIndex = i;
        tableData[i].moveUp = true;
        tableData[i].moveDown = true;
        // 数组第一组数据禁止上移
        tableData[0].moveUp = false;
        // 数组最后一组数据禁止下移
        tableData[tableData.length - 1].moveDown = false;
      }
    },
  },
};
</script>

没办法展示，要是可以录视频就好啦！自行体会吧哈哈哈