@findsoft/draggable-table

基于vuedraggable封装的拖拽表格组件，样式和参数参考了ant-design table

Install

npm install @findsoft/draggable-table

Quick Start

<!-- vue -->
<template>
  <template v-for='(v, k) in demoList' :key='k'>
    <a-draggable-table v-bind='v' @end='onTableDragEnd' @selectChange='onTableSelect'>
      <template #list='{ record }'> 查看 <template>
      <template v-slot:operation='{ text, record }'> 编辑 <template>
    </a-draggable-table>
  </template>
</template>

import DraggableTable, { IBaseRecord, IColumns } from '@findsoft/draggable-table';

export default {
  components: {
    aDraggableTable: DraggableTable
  },
  setup() {
    // IBaseRecord 基础record字段，也可以不用。
    const tableClassList = ref<{id: string, name: string}[]>([
      {id: 1, name: 111},
      {id: 2, name: 222},
    ]);
    const columnClass: IColumns[] = [
      {
        title: '班级名称',
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        title: '班级人数',
        dataIndex: 'stuNum',
        ellipsis: true,
      },
      {
        title: '学生明细',
        dataIndex: 'list',
        slots: { customRender: 'list' },
        ellipsis: true,
      },
      {
        title: '所属教师',
        dataIndex: 'userNames',
        ellipsis: true,
      },
      {
        title: '操作',
        dataIndex: 'operation',
        slots: { customRender: 'operation' },
        width: '15%',
      },
    ];
    const loadingClassList = ref(false);
    const demoList = ref([
      {
        columns:columnClass,
        dataSource:tableClassList,
        loading:loadingClassList,
        rowSelect:true,
        bordered:false
      },
      {
        columns:columnClass,
        dataSource:tableClassList,
        loading:loadingClassList,
        rowSelect:false,
        bordered:true
      },
      {
        columns:columnClass,
        dataSource:tableClassList,
        loading:loadingClassList,
        rowSelect:true,
        bordered:true
      }
    ]);
    const onTableDragEnd = (list: []) => {
      console.log(list,'this is list');
    };
    const onTableSelect = ({ selectRowKeys: rowKeys }: {selectRowKeys: string[]}) => {
      console.log(rowKeys,'this is selectKey');
    }
    return {
      demoList,
      onTableDragEnd,
      onTableSelect
    }
  }
};

Props—Table

参数	说明	类型	默认值	必填
dataSource	表格数据	Array		是
columns	表格列	Array		是
loading	表格loading状态	boolean	false	否
bordered	是否显示描边	boolean	true	否
rowSelect	是否需要复选框	boolean	true	否
tHeadStyle	表头样式	Object	{}	否

Props—Column

参数	说明	类型	默认值	必填
title	表头标题	string		是
dataIndex	列对应字段	string		是
key	列key	string		是
width	列宽	string | number	自适应	否
align	对齐方式	string	left	否
ellipsis	单行溢出省略	boolean	true	否
slots	customRender: {slot: string}	string		否

Slot

slots 的 customRender 对应table插槽

CallBack

// 选中ids发生变化时触发
selectChange: () => {selectRowKeys: string[]};
// 拖拽结束后触发
end: () => IBaseRecord[];