# draggableTable

**Repository Path**: zedcat/draggable-table

## Basic Information

- **Project Name**: draggableTable
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-19
- **Last Updated**: 2025-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 可拖拽表头表格组件

一个基于Vue.js的表格组件，支持列的拖拽排序和列宽调整功能。

## 功能特点

- 列的拖拽排序：使用鼠标拖动表头可以调整列的显示顺序
- 列宽调整：通过拖拽列边缘可以动态调整列的宽度
- 内容溢出提示：当单元格内容过长时，鼠标悬停会显示完整内容的提示框
- 响应式设计：适应不同屏幕尺寸

## 技术栈

- Vue.js 2.6.11
- vuedraggable 2.24.3
- Webpack 3.6.0

## 安装

```bash
# 克隆项目
git clone <项目地址>

# 进入项目目录
cd drageTable

# 安装依赖
npm install
```

## 使用方法

### 基本使用

```vue
<template>
  <div>
    <DraggableTable 
      :columns="columns" 
      :data="tableData" 
      @column-change="handleColumnChange" 
    />
  </div>
</template>

<script>
import DraggableTable from './components/draggable-table.vue'

export default {
  components: {
    DraggableTable
  },
  data() {
    return {
      columns: [
        {
          key: 'id',
          title: 'ID'
        },
        {
          key: 'name',
          title: '姓名'
        },
        // 更多列配置...
      ],
      tableData: [
        { id: 1, name: '张三', /* 更多字段... */ },
        // 更多数据...
      ]
    }
  },
  methods: {
    handleColumnChange(newColumns) {
      console.log('列顺序已变更:', newColumns)
    }
  }
}
</script>
```

### 组件属性

| 属性名 | 类型 | 描述 |
|-------|------|------|
| columns | Array | 列配置数组，包含key和title字段 |
| data | Array | 表格数据数组 |

### 组件事件

| 事件名 | 参数 | 描述 |
|-------|------|------|
| column-change | newColumns | 当列顺序发生变化时触发，返回新的列配置数组 |

## 开发

```bash
# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

## 项目结构

```
├── src/
│   ├── components/
│   │   └── draggable-table.vue  # 可拖拽表格组件
│   ├── App.vue                  # 应用入口组件
│   └── main.js                  # 应用入口文件
├── index.html                   # HTML模板
├── webpack.config.js            # Webpack配置
└── package.json                 # 项目配置和依赖
```

## 主要功能实现

### 1. 列拖拽排序
使用vuedraggable组件实现列的拖拽功能，通过`v-model`绑定列配置数组，当拖拽完成后触发`change`事件通知父组件。

### 2. 列宽调整
通过监听鼠标事件实现列宽调整功能：
- `mousedown`：记录初始状态，开始调整
- `mousemove`：计算宽度变化，更新列宽
- `mouseup`：结束调整，保存最终宽度

### 3. 内容提示
自定义`v-tooltip`指令，当鼠标悬停在内容上时显示提示框，避免内容过长影响表格布局。

## License

MIT