I am using element-ui-el-table-draggable to achieve the draggable effect on my el table, and it is working very fine.
Now, I want to use the disable option from SortableJS, but I dont know how to put these together. Please check the below links.
Github for Sortable and please search for "disable option"
Is this possible to do so? I am using Vue 2.6.11
Thanks a lot! Happy new year of 2022!
<el-button type="primary" @click="switchState">{{ Disable }}</el-button>
<p class="p-3" v-if="departmentlist">
<ElTableDraggable>
<el-table
stripe
class="table-responsive table"
header-row-class-name="thead-light"
:data="departmentlist"
@row-click="row_clicked_event">
<!-- <el-table-column label="ID" prop="IDn">
<template v-slot="{ row }">
{{ row.IDn }}
</template>
</el-table-column> -->
<el-table-column label="PLU" prop="PLU" :key="PLU"> </el-table-column>
<el-table-column :label="$t('Name') + '1'" prop="Name1" :key="$t('Name') + '1'">
</el-table-column>
<el-table-column :label="$t('Name') + '2'" prop="Name2" :key="$t('Name') + '2'">
</el-table-column>
<el-table-column :label="$t('Sort Order')" prop="SortOrder" :key="$t('Sort Order')">
</el-table-column>
<el-table-column :label="$t('Remarks')" prop="Remarks" :key="$t('Remarks')">
</el-table-column>
</el-table>
</ElTableDraggable>
</p>
<p class="p-3" v-else>
{{ $t("No Records") }}
</p>
<script>
import ElTableDraggable from 'element-ui-el-table-draggable'
export default {
components: {
...
ElTableDraggle
},
data() {
...
},
methods:{
switchState(){
// This should be where the magic happens I think
}
},
}
</script> ```
To disable the sortable list, you have to add disabled: true as second argument.
var sortable = Sortable.create(list, {
disabled: true
});