快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → element-ui-+-sortable.js-实现可拖拽表格

element-ui-+-sortable.js-实现可拖拽表格

时间:2022-09-25 16:36:21人气:作者:快盘下载我要评论

element-ui ; sortable.js 实现可拖拽表格

先看效果;
element-ui-+-sortable.js-实现可拖拽表格

安装Sortablejs

npm install sortablejs --save

demo

<template>
  <el-table id=;draggable-table; row-key=;id; :data=;tableData;>
    <el-table-column label=;序号; type=;index; width=;50;></el-table-column>
    <el-table-column prop=;name; label=;姓名; width=;180;></el-table-column>
    <el-table-column prop=;address; label=;地址;></el-table-column>
  </el-table>
</template>


<script>
import Sortable from ;sortablejs;

export default {
  name: ;draggable-table;,
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: ;person-1;,
          address: ;address-1;
        },
        {
          id: 2,
          name: ;person-2;,
          address: ;address-1;
        },
        {
          id: 3,
          name: ;person-3;,
          address: ;address-1;
        }
      ]
    }
  },
  mounted() {
    const el = document.querySelector(;#draggable-table tbody;);
    const option = {
      animation: 200,
      onEnd: ({newIndex, oldIndex}) => {
        const currRow = this.tableData.splice(oldIndex, 1)[0]
        this.tableData.splice(newIndex, 0, currRow)
      },
    };
    const sortable = Sortable.create(el, option);
  }
}
</script>

<style scoped>
</style>

相关文章

  • Clion 2021软件下载和安装教程

    Clion 2021软件下载和安装教程,CLion 2021是款适用于C和C ++的跨平台IDE,功能强大的智能编码辅助和代码分析软件,使用 CLion能够通过即时导航和可靠的重构来提升你的工作效率,......
  • Revit-2022安装教程

    Revit-2022安装教程(附详细安装步骤+激活教程),8.停止桌面许可服务,将AdskLicensingService.exe复制到默认C:Program Files (x86)Common FilesAutodesk SharedAdskLicensing11.0.0.4854AdskLicensingServiceAdskLicensingService.exe,点击替换你目标中的文件。2.得到“Revit_2022_G1_Win_64bit”文件夹,加载里面的“Revit_2022...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。