vuedraggable官方文档链接：https://www.itxst.com/vue-draggable/tutorial.html
按装
npm i -S vuedraggable
页面引入
import draggable from "vuedraggable"
注册组件
components: {
draggable
},
使用
<template>
<div>
<el-popover placement="bottom" width="200" trigger="click">
<vuedraggable v-model="tablecolumns" :options="dragOptions">
<transition-group>
<div
v-for="(item, index) in tablecolumns"
:key="index"
:draggable="!item.status"
:class="{ draggable: !item.status }"
style="display: flex; justify-content: space-between"
>
<el-checkbox
v-model="item.isShow"
:disabled="item.status"
@change="(checked) => itemchange(checked, index)"
>{{ item.label }}</el-checkbox
>
<div
style="display: inline-block; font-size: 14px; margin-right: 10px"
>
<div
:class="item.status ? '' : 'textBlue'"
@click="item.status = !item.status"
>
{{ item.status ? "解冻" : "冻结" }}
</div>
</div>
</div>
</transition-group>
</vuedraggable>
<el-button slot="reference" style="margin-left: 30%">设置表头</el-button>
</el-popover>
<el-table
ref="mytable"
border
:data="tableData"
class="customer-no-border-table"
:header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
style="width: 40%; border-top: 1px solid #409eff; margin: auto"
>
<el-table-column
type="index"
label="序号"
fixed
align="center"
></el-table-column>
<template v-for="(item, index) in tablecolumns">
<el-table-column
v-if="item.isShow"
:key="index"
:prop="item.prop"
:formatter="item.formatter"
:label="item.label"
:fixed="item.status"
width="300"
:min-width="item.minWidth"
show-overflow-tooltip
align="center"
>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
originColumns: [
{ label: "订单号", prop: "billCode", status: false, isShow: true },
{ label: "电站名称", prop: "buildName", status: false, isShow: true },
{ label: "公司名称", prop: "companyName", status: false, isShow: true },
],
tablecolumns: [],
dragOptions: {
group: "items",
// 在拖拽过程中检查每个元素的 draggable 属性
draggable: ".draggable",
},
tableData: [
{ billCode: "111", buildName: "宝隆电站", companyName: "A公司" },
{ billCode: "222", buildName: "双井电站", companyName: "B公司" },
{ billCode: "333", buildName: "国贸电站", companyName: "C公司" },
],
};
},
created() {
this.tablecolumns = this.originColumns;
},
methods: {
// 勾选
itemchange(value, index) {
console.log(value, index);
this.tablecolumns[index].isShow = value;
},
},
};
</script>
<style lang="less" scoped>
.textBlue {
color: #1890ff;
font-size: 14px;
cursor: pointer;
border: none;
}
</style>
在 vuedraggable 中，要禁止某个元素拖拽，你可以使用 vuedraggable 提供的 draggable 和 group 属性结合的方式实现。下面是具体的步骤：
- 在你的 Vue 组件中引入
vuedraggable：
import draggable from 'vuedraggable';
- 在你的组件模板中，使用
draggable组件，并为每个元素绑定draggable属性：
<draggable v-model="list" :options="dragOptions">
<div v-for="(item, index) in list" :key="item.id" :draggable="!item.disableDrag">
{{ item.name }}
</div>
</draggable>
在上述代码中，list 是你的数据列表，其中每个元素需要包含一个名为 disableDrag 的布尔类型属性来控制元素是否可拖拽。
- 在你的 Vue 组件中，定义
dragOptions：
data() {
return {
list: [
{ id: 1, name: 'Item 1', disableDrag: false },
{ id: 2, name: 'Item 2', disableDrag: false },
{ id: 3, name: 'Item 3', disableDrag: true },
{ id: 4, name: 'Item 4', disableDrag: false },
],
dragOptions: {
group: 'items',
// 在拖拽过程中检查每个元素的 draggable 属性
draggable: '.draggable',
},
};
},
在上述代码中，dragOptions 的 draggable 属性设置为 .draggable，这将检查每个元素是否具有 draggable 类，如果没有该类，则元素将被禁止拖拽。
- 最后，为那些你想禁止拖拽的元素添加
draggable类：
<div v-for="(item, index) in list" :key="item.id" :draggable="!item.disableDrag" :class="{ 'draggable': !item.disableDrag }">
{{ item.name }}
</div>
通过上述步骤，你可以在 vuedraggable 中控制特定元素是否可拖拽。如果列表中的元素的 disableDrag 属性为 true，则该元素将不可拖拽，否则该元素可以拖拽。