<el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input type="text" v-model="scope.row.remark"></el-input> </template> </el-table-column>让其不影响全选

时间: 2023-10-06 18:06:01 浏览: 53

【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx

vue 使用 sortable 实现 el-table 拖拽排序功能　　本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示：　　npm 下载：　　npm install sortablejs --save　　引入：　　import Sortable from "sortablejs";　　代码：　　<template>　　 <div class="table">　　 <el-table ref="dragTable" :data="tableData" border :row-class-name="tableRowClassName">　　在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中实现`el-table`拖拽排序的详细步骤：确保已经安装了`sortablejs`库。可以通过npm来安装： ```bash npm install sortablejs --save ``` 接下来，在Vue组件中引入`sortablejs`： ```javascript import Sortable from "sortablejs"; ``` 在模板部分，创建一个包含`el-table`的`div`元素，并为其绑定数据和一个自定义的`row-class-name`属性，以便我们可以为不可拖动的行设置特定的类： ```html <template> <div class="table"> <el-table ref="dragTable" :data="tableData" border :row-class-name="tableRowClassName">  <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button class="move" type="text" size="small">拖拽</el-button> </template> </el-table-column> </el-table> </div> </template> ``` 在数据部分，定义表格的数据，包括一些具有`disabled`属性的项，这些项将被标记为不可拖动： ```javascript data() { return { tableData: [ { id: "1", name: "text_1", date: "1111-11-11", address: "测试_1" }, { id: "2", name: "text_2_不可拖拽", date: "2222-22-22", address: "测试_2_不可拖拽", disabled: true }, { id: "3", name: "text_3", date: "3333-33-33", address: "测试_3" }, { id: "4", name: "text_4", date: "4444-44-44", address: "测试_4" }, { id: "5", name: "text_5", date: "5555-55-55", address: "测试_5" }, ], }; }, ``` 在方法部分，我们需要创建一个`initSortable`函数来初始化`sortablejs`实例。这个函数会获取`el-table`的`tbody`元素，并创建一个拖拽实例。这里我们设置了动画效果、拖拽触发的目标、不可拖动的类名以及拖拽过程中的样式类名： ```javascript methods: { initSortable() { const ele = this.$refs.dragTable.$el.querySelector(".el-table__body > tbody"); let dragTable = Sortable.create(ele, { animation: 150, // 动画效果 handle: ".move", // 只有点击带有'move'类的按钮时才能触发拖拽 filter: ".disabled", // 不可拖动的行 dragClass: "dragClass", // 拖拽时元素的样式类 ghostClass: "ghostClass", // 拖拽时悬浮元素的样式类 chosenClass: "chosenClass", // 选中状态的样式类 // 监听拖拽事件 onStart: () => { console.log("开始拖动"); }, onEnd: (e) => { console.log(`结束拖动`, `拖动前索引${e.oldIndex}---拖动后索引${e.newIndex}`); // 在拖放结束后更新数据源 const item = this.tableData.splice(e.oldIndex, 1)[0]; this.tableData.splice(e.newIndex, 0, item); }, }); }, // 为表格行设置class tableRowClassName({ row }) { if (row.disabled) { return "disabled"; } return ""; }, }, ``` 在Vue组件的生命周期钩子中调用`initSortable`，确保在表格渲染完成后初始化拖拽功能： ```javascript mounted() { this.initSortable(); } ``` 通过以上步骤，我们成功地在Vue的`el-table`组件中实现了基于`sortablejs`的拖拽排序功能。拖动表行时，`onEnd`事件会捕获旧的索引和新的索引，并根据这些信息更新数据源，以保持视图与数据同步。同时，通过`disabled`属性和`row-class-name`，我们可以控制某些行不可拖动，提供更好的用户体验。

可以在 el-input 元素上添加 @click.stop 阻止事件冒泡，从而避免影响全选功能。修改后的代码如下： ``` <el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input type="text" v-model="scope.row.remark" @click.stop></el-input> </template> </el-table-column> ``` 这样点击输入框时就不会触发 el-table 的选中事件，从而不会影响全选功能。

阅读全文

<el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input type="text" v-model="scope.row.remark"></el-input> </template> </el-table-column>让其不影响全选

相关推荐

Vue+element-ui Table二次封装实践详解

Element-ui定制table：表头自定义、样式修改与tooltip应用

<el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input v-model="scope.row.remark"></el-input> </template> </el-table-column>输入影响全选

element ui <el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input v-model="scope.row.remark"></el-input> </template> </el-table-column>阻止输入影响全选

<el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input type="text" v-model="scope.row.remark"></el-input> </template> </el-table-column>给个默认值

VUE element-ui 实现复用Table组件的高效示例

wepy-prop-types插件：实现wepy属性类型的严格检测

dnSpy-net-win32-222.zip

和美乡村城乡融合发展数字化解决方案.docx

如何看待“适度宽松”的货币政策.pdf

C#连接sap NCO组件 X64版

法码滋.exe法码滋2.exe法码滋3.exe

基于MATLAB的导航科学计算库

毕业设计Jupyter Notebook基于深度网络的垃圾识别与分类算法研究项目源代码，用PyTorch框架中的transforms方法对数据进行预处理操作，后经过多次调参实验，对比不同模型分类效果

C#上位机开发与工控通讯实战课程

course_s4_ALINX_ZYNQ_MPSoC开发平台Linux驱动教程V1.04.pdf

基于JavaWeb的毕业季旅游一站式定制服务平台_88z1j4jp_208-wx-(1).zip

数据恢复软件 Apeaksoft Data Recovery for Mac v1.6.16

cms测试练习项目（linux系统部署）

最新推荐

dnSpy-net-win32-222.zip

和美乡村城乡融合发展数字化解决方案.docx

如何看待“适度宽松”的货币政策.pdf

C#连接sap NCO组件 X64版

法码滋.exe法码滋2.exe法码滋3.exe

GitHub图片浏览插件：直观展示代码中的图像

管理建模和仿真的文件

【OPPO手机故障诊断专家】：工程指令快速定位与解决

求[100，900]之间相差为12的素数对（注：要求素数对的两个素数均在该范围内）的个数

Android IPTV项目：直播频道的实时流媒体实现