526互联

实现表格行列拖拽

发布时间 2023-09-07 08:17:51作者: ^Mao^

背景

有的时候我们需要前端来实现行和列的拖拽，把想要看的内容往前提，

代码

<template>
  <div class="app">
    <h1>实现表格行列拖拽</h1>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="number" label="序号" width="100"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="email" label="邮件" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Mock from "mockjs";

const tableData = ref([]);

const ret = Mock.mock({
  "result|10-20": [
    {
      id: "@guid",
      "number|+1": 1,
      date: "@date",
      name: "@name",
      email: "@email",
      address: "@csentence(8,15)",
    },
  ],
});
tableData.value = ret.result;
</script>

<style lang="less" scoped></style>