element-plus 表格

实现 `element-plus` 中表格行的拖拽排序功能，可以通过集成第三方库 `SortableJS` 来完成。以下是一个完整的实现方案： ### 安装依赖 首先需要安装 `SortableJS`： ```bash npm install sortablejs # 或者使用 yarn yarn add sortablejs ``` 如果希望在拖拽列中添加图标，则可以安装 `@element-plus/icons-vue`： ```bash npm install @element-plus/icons-vue # 或者使用 yarn yarn add @element-plus/icons-vue ``` ### 模板代码（使用 `el-table`） ```vue <template> <el-table :data="tableData" style="width: 100%" ref="tableRef"> <!-- 可选：添加拖拽图标 --> <el-table-column label="拖拽" align="center" width="50px"> <div class="drag-handler"> <el-icon :size="20" style="cursor: pointer"> <Rank /> </el-icon> </div> </el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> ``` ### 脚本部分（Vue3 + Composition API） ```vue <script setup> import { ref, onMounted } from 'vue' import Sortable from 'sortablejs' import { Rank } from '@element-plus/icons-vue' const tableData = ref([ { name: '张三', age: 25 }, { name: '李四', age: 30 }, { name: '王五', age: 28 }, ]) const tableRef = ref(null) const rowDrop = () => { const tbody = document.querySelector('.el-table__body tbody') new Sortable(tbody, { animation: 150, ghostClass: 'blue-background-class', onEnd: (obj) => { const list = JSON.parse(JSON.stringify(tableData.value)) const movedItem = list.splice(obj.oldIndex, 1)[0] list.splice(obj.newIndex, 0, movedItem) tableData.value = list }, }) } onMounted(() => { rowDrop() }) </script> ``` ### 样式部分（可选） ```vue <style> .blue-background-class { background-color: #e6f7ff !important; } .drag-handler { cursor: move; } </style> ``` ### 注意事项 - 在 `el-table` 中，拖拽操作的目标是 `.el-table__body tbody` 元素 [^2]。 - 确保在组件挂载后初始化 `Sortable`，以确保 DOM 已经渲染完毕。 - 如果数据量较大或性能要求较高，建议优化 `onEnd` 回调中的逻辑，避免不必要的深拷贝操作。 ---

在 element-plus 表格中显示图片，你可以使用自定义模板来实现。首先，你需要在表格列的 `render` 函数中返回一个包含 `<img>` 标签的 HTML 字符串。 下面是一个简单的示例代码，展示了如何在 element-plus 表格中显示图片： ```vue <template> <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column label="Image"> <template #default="{ row }"> <img :src="row.imageUrl" alt="Image" height="50" width="50"> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'Item 1', imageUrl: 'https://example.com/image1.jpg' }, { name: 'Item 2', imageUrl: 'https://example.com/image2.jpg' }, // 添加更多数据... ] }; } }; </script> ``` 在上面的代码中，我们定义了一个 `tableData` 数组，其中包含了每一行的数据和对应的图片 URL。在 `el-table-column` 中，我们使用了自定义模板，并通过 `row` 参数获取当前行的数据，然后使用 `<img>` 标签来显示图片。你可以根据自己的需求调整 `img` 标签的属性。 记得替换示例代码中的图片 URL 和表格数据，以适应你的实际情况。