通过当前this取table中行的所有数据

οnclick="delete(this);"

function delete (cell) {

  var row=cell.parentNode.parentNode.parentNode;
  var orderCode=row.cells[0].innerText;
  var versionNo=row.cells[1].innerText;

}

使用parentNode总会取到你要的当前行。

row下面的td使用cell【i】来取得

1号位为:

<td style="display:none"> 隐藏text



要在Vue.js的VxeTable组件中实现行的拖拽操作并保持数据联动更新,你可以按照以下步骤进行: 1. **安装依赖**: 首先,你需要确保已安装VueX库作为状态管理工具,并安装`vue-draggable`或`vuedraggable`这样的第三方插件用于处理拖放功能。 ```bash npm install vue-draggable vxe-table vuex --save ``` 2. **引入组件和库**: 在你的项目文件中导入需要的组件和库。 ```javascript import draggable from 'vuedraggable' import VxeTable from 'vxe-table' import { mapState } from 'vuex' ``` 3. **创建状态管理**(如果还没有的话): 在Vuex store中添加一个数组来存储表格的数据,并设置相应的actions和mutations来进行数据的操作。 ```javascript // store/modules/data.js export const state = () => ({ tableData: [] }) export const mutations = { setTableData(state, newData) { state.tableData = newData; } } export const actions = { updateTableData({ commit }, payload) { commit('setTableData', payload); } } ``` 4. **配置表头和列**: 在VxeTable组件中,为需要拖拽排序的列指定draggable属性。 ```html <vxe-table :data="tableData" :columns="columns"> <!-- ... --> <vxe-column label="标题" field="field" draggable></vxe-column> <!-- ... --> </vxe-table> ``` 5. **监听拖动事件**: 使用`vuedraggable`的`start`, `end`, 和 `update` 事件处理程序来跟踪和更新数据。 ```javascript computed: { ...mapState(['tableData']), columns() { return [ { ..., draggable: { group: '__group__', // 给拖拽元素分组 pull: 'clone', // 拖动时复制元素 onDragStart(item, event) { this.currentDraggingItem = item; // 记录当前拖动项 }, onDragEnd(event) { let sourceIndex = this.columns.findIndex(col => col === this.currentDraggingItem); let targetIndex = event.newIndex; // 更新store和tableData this.$store.dispatch('updateTableData', { sourceIndex, targetIndex, data: this.tableData // 或者使用具体的item数据对象 }); }, onUpdate(event) { console.log('正在移动到位置:', event.newIndex); } } }, /* ... */ ] } } ``` 6. **模板中的事件绑定**: 在表格行上绑定`@drag-end`事件来处理结束时的回调,比如切换行的位置。 ```html <template slot="body" slot-scope="scope"> <tr draggable @drag-end="handleDragEnd(scope.$index)"> <td>{{ scope.row.field }}</td> <!-- ... --> </tr> </template> <script> methods: { handleDragEnd(index) { // 在这里更新表格行的顺序,例如通过索引来交换两个元素 const temp = this.tableData[index]; this.tableData.splice(index, 1); this.tableData.splice(this.currentDraggingItem.index, 0, temp); } } </script> ``` 完成上述步骤后,你就可以在VxeTable中实现行的拖拽操作,每次拖动都会触发数据联动更新。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值