el-table-draggable 表格某一行禁止拖拽
时间: 2023-07-08 14:46:18 浏览: 387
在 `el-table-draggable` 中禁止某一行拖拽,可以通过在数据中添加一个 `disabled` 属性,然后在组件中根据该属性来动态设置某一行的拖拽状态。以下是示例代码:
```html
<template>
<div>
<el-table-draggable :data="tableData" :columns="tableColumns" @drag-drop="handleDragDrop">
</el-table-draggable>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, date: '2021-01-01', name: 'John', address: 'New York', disabled: true },
{ id: 2, date: '2021-01-02', name: 'Jane', address: 'Paris', disabled: false },
{ id: 3, date: '2021-01-03', name: 'Bob', address: 'London', disabled: false }
],
tableColumns: [
{ prop: 'date', label: 'Date', width: 180 },
{ prop: 'name', label: 'Name', width: 180 },
{ prop: 'address', label: 'Address' }
]
};
},
methods: {
handleDragDrop(draggingRow, dropRow) {
if (dropRow.disabled) {
return false; // 禁止拖拽到禁止拖拽的行
} else {
// 处理拖拽操作
}
}
}
};
</script>
```
在数据中添加一个 `disabled` 属性,然后在 `handleDragDrop` 方法中,根据该属性来判断行是否禁止拖拽,如果禁止,则返回 false,否则处理拖拽操作。
阅读全文