el-table使用sortablejs 如何取消点击input也拖拽
时间: 2023-06-26 11:08:18 浏览: 250
要取消在 el-table 中拖拽 input 的功能,可以通过在 el-table-column 中设置 `sortable` 属性为 false,例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age" :sortable="false"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
```
这样就可以禁用对 `age` 列的拖拽排序功能。
如果要使用 sortablejs 进行拖拽排序,但不希望 input 元素被拖拽,可以通过在 el-table-column 中设置 `sortable-handler` 属性为一个选择器字符串,表示只有选中的元素才能触发拖拽事件,例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age" :sortable="true" sortable-handler=".drag-handle"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
```
然后在 el-table-column 中的表头 slot 中添加一个拖拽手柄元素,例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age" :sortable="true" sortable-handler=".drag-handle">
<template slot="header">
<div class="drag-handle">Drag</div>
</template>
</el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
```
这样就只有拖拽手柄元素才能触发拖拽事件,而 input 元素不会被拖拽。
阅读全文