vue3 elementPlus 表格实现行列拖拽及列检索功能

1、安装vuedraggable

npm i -S vuedraggable@next

2、完整代码

TypeScript 复制代码
<template>
<div class='container'>
  <div class="dragbox">
    <el-table row-key="id" :data="tableData" :border="true">
      <el-table-column
        v-for="item in columnList"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        sortable
      >
        <template #header>
          {{item.label}}
          <el-popover
            :visible="item.visible"
            placement="bottom"
            :width="200"
            trigger="click"
          >
            <template #reference>
              <el-button :type="item.input===''?'info':'primary'" link :icon="Search" @click.stop="item.visible = !item.visible"></el-button>
            </template>
            <div>
              <el-input v-model="item.input" placeholder="请输入" size="small" />
              <div style="margin-top: 5px; display: flex; justify-content: space-between;">
                <el-button size="small" type="primary" @click="searchItem(item)">查询</el-button>
                <el-button size="small" @click="resetItem(item)">重置</el-button>
              </div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
</template>
<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'
import Sortable from "sortablejs"
import { ref } from 'vue'

const tableData = ref([
  {id: 1, name: '纸巾', type: '百货', price: 30},
  {id: 2, name: '抽纸', type: '百货', price: 18},
  {id: 3, name: '水杯', type: '百货', price: 50},
])

const columnList = ref([
  {label: '名称', prop: 'name', input: '', visible: false},
  {label: '类型', prop: 'type', input: '', visible: false},
  {label: '价格', prop: 'price', input: '', visible: false},
])
onMounted(() => {
  // 页面加载完成执行拖拽函数
  rowDrop()
  columnDrop()
})

// 列查询
const searchItem = (item: any) => {
  item.visible = false
  console.log(item);
}
// 列查询重置
const resetItem = (item: any) => {
  item.visible = false
  item.input = ''
  console.log(item);
}
// 行拖拽
const rowDrop = () => {
  const tbody = document.querySelector('.dragbox .el-table__body-wrapper tbody');
  Sortable.create(tbody, {
    draggable: ".dragbox .el-table__row",
    onEnd(evt: any) {
      const currRow = tableData.value.splice(evt.oldIndex, 1)[0];
      tableData.value.splice(evt.newIndex, 0, currRow);
      console.log(tableData.value);
    }
  });
}
// 列拖拽
const columnDrop = () => {
  const tr = document.querySelector('.dragbox .el-table__header-wrapper tr');
  Sortable.create(tr, {
    animation: 150,
    delay: 0,
    onEnd: (evt: any) => {
      const oldItem = columnList.value[evt.oldIndex];
      columnList.value.splice(evt.oldIndex, 1);
      columnList.value.splice(evt.newIndex, 0, oldItem);
      console.log(columnList.value);
    }
  });
}

</script>
<style lang='scss' scoped>
.container {
  height: 100vh;
  .dragbox {
    height: 100%;
  }
}
</style>
相关推荐
Dnn011 小时前
修改el-select背景颜色
css·elementui·vue3
sen_shan4 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
是二牙5 天前
vue3+vite 多个环境配置
前端·vue3·vite
緑水長流*z5 天前
(03)Vue的常用指令
前端·vue.js·vue3·vue2·vue框架·vue学习笔记·vue学习教程
Edward-tan8 天前
【玩转全栈】—— Django+vue3+讯飞星火API 实现前端页面实时AI答复
vue3·全栈·django5
USER_A0019 天前
【VUE3】练习项目——大事件后台管理
前端·vue.js·axios·pinia·elementplus·husky·vuerouter4
sen_shan14 天前
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单
vue.js·typescript·vue3·element·element plus·动态菜单·多用户动态加载菜单
Samdy_Chan15 天前
同时支持Vue2/Vue3的图片懒加载组件(支持懒加载 v-html 指令梆定的 html 内容)
前端·vue·vue3·vue2·懒加载·图片懒加载·图像懒加载
USER_A00115 天前
【VUE3】Eslint 与 Prettier 的配置
vue3·eslint·prettier
sen_shan20 天前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单