- 效果图
-
vue3.0+element-plus
-
拖拽效果 vue-draggable-plus
-
父组件使用
<column-dialog :options="fields"v-model="content"></column-dialog>
-
子组件 ColumnDialog/index.vue
<template><div ><el-input placeholder="请选择"readonly@click="onVisible"v-model="valueName" /><el-dialog title="编辑显示列"width="600"v-model="visible"><div class="column_content"><div class="column_header"><div class="flex justify-between"><el-checkbox :indeterminate="indeterminate"@change="onCheckAllChange"v-model="checkAll">全选</el-checkbox><el-button size="default"@click="handleAddGroup"><el-icon><plus /></el-icon>新增分组</el-button></div></div><vue-draggable ghostClass="custom_drag_class"handle=".draggable_column"@end="onEndDraggable"@start="isDraggable = true"v-model="currentContent"><div v-for="(item,index) in currentContent":key="item.dataIndex"><!-- 分组类型 --><div v-if="item.children"class="group-container" ><div class="draggable_column "><div class="column_row flex justify-between column_child":class="{hideShadow: isDraggable}"><div><img alt=""class="drag_icon"src="@/assets/drag.svg"/><span class="column_title">{{ item.title }}</span></div><div class="field-actions"><el-button icon="Edit"size="small"title="重命名"@click="editField(index)"/><el-button icon="Delete"size="small"title="解散分组"@click="deleteField(index)"/></div></div></div><!-- 分组子字段拖拽容器--><div class="field-children"><vue-draggable class="child-list"ghostClass="dragging"handle=".child-drag-handle"v-model="item.children"><div v-for="ele in item.children":key="ele.dataIndex"><div class="child-drag-handle"><div class="column_row column_child"><img alt=""class="drag_icon"src="@/assets/drag.svg"/><el-checkbox @change="e => onChangeItem(e,ele)"v-model="ele.selectFlag"><span class="column_title">{{ ele.title }}</span></el-checkbox></div></div></div></vue-draggable></div></div><!-- 普通字段类型 --><div v-elseclass="draggable_column"><div class="column_row":class="{hideShadow: isDraggable}"><img alt=""class="drag_icon"src="@/assets/drag.svg"/><el-checkbox @change="e => onChangeItem(e,item)"v-model="item.selectFlag"><span class="column_title">{{ item.title }}</span></el-checkbox></div></div></div></vue-draggable></div><template #footer><el-button @click="closeFather">取消</el-button><el-button type="primary"@click="onSubmit">保存</el-button></template></el-dialog><el-dialog :close-on-click-modal="true"title="新增分组"width="600px"@close="closeGroupModal"v-model="groupModalVisible"><div class="modal-body"><el-form-item class="form-group"label="分组名称"><el-input placeholder="请输入分组名称"v-model.trim="groupName"/></el-form-item><el-form-item class="form-group"label="选择字段"><div class="fields-selection"><div v-for="(field, index) in nonGroupedFields":key="`select-field-${index}-${field.dataIndex}`"class="field-option":class="{ selected: selectedFieldIndexes.includes(index) }"><el-checkbox class="field-checkbox":value="index"v-model="selectedFieldIndexes"/><label>{{ field.title }}</label></div></div></el-form-item></div><template #footer><el-button @click="closeGroupModal">取消</el-button><el-button type="primary"@click="createGroup">确认</el-button></template></el-dialog></div></template><script setup lang="ts">import { VueDraggable } from "vue-draggable-plus";import _ from "lodash";const props = defineProps({title: { type: String, default: "请选择" },options: { type: Array as () => any[], default: () => [] },});// 定义emitsconst emit = defineEmits(["change"]);const model: any = defineModel();const indeterminate = ref(false);const checkAll = ref(false);const visible = ref(false);const List = ref([]);const checkData = ref([]); // 选中勾选的数据const isDraggable = ref(false);const currentContent = ref([]);const groupName = ref(""); // 分组名称const groupModalVisible = ref(false);const selectedFieldIndexes: any = ref([]); // 勾选的索引// 计算属性：非分组字段（用于模态框选择）const nonGroupedFields = computed(() => currentContent.value.filter(field => !field.children));watch(() => model.value,() => {const newList: any = _.cloneDeep(model.value);currentContent.value = newList;checkData.value = newList?.filter(el => el.selectFlag).map(el => el.dataIndex);isCheckAll();},{ immediate: true });// 监听options变化watch(() => props.options,newVal => {List.value = _.cloneDeep(newVal);isCheckAll();},{ immediate: true });function onVisible() {visible.value = true;}// 全选处理function onCheckAllChange(checked) {checkAll.value = checked;indeterminate.value = false;checkData.value = checked ? List.value.map(el => el.dataIndex) : [];currentContent.value.forEach(item => {item.selectFlag = checked;if (item?.children && item?.children.length > 0) {item.children.forEach(ele => {ele.selectFlag = checked;});}});}// 单选处理function onChangeItem(checked, item) {item.selectFlag = checked;const groupId = item.dataIndex;const checkIndex = _.findIndex(checkData.value, e => e === groupId);if (checked) {checkData.value.push(groupId);} else {checkData.value.splice(checkIndex, 1);}isCheckAll();}function isCheckAll() {indeterminate.value = Boolean(checkData.value?.length) && checkData.value?.length < List.value?.length;checkAll.value = checkData.value?.length === List.value?.length;}// 提交处理function onSubmit() {model.value = currentContent.value;emit("change");closeFather();}// 拖拽结束处理function onEndDraggable() {isDraggable.value = false;}// 关闭弹窗function closeFather() {visible.value = false;}// 计算显示的名称const valueName = computed(() => {if (!model.value || model.value.length === 0) {return "";}const list = [];model.value?.forEach(el => {if (el.selectFlag) {list.push(el.title);}if (el?.children) {el.children.forEach(ele => {if (ele.selectFlag) {list.push(ele.title);}});}});return list.map(el => el).join(", ");});// 新增分组function handleAddGroup() {groupName.value = "";selectedFieldIndexes.value = [];groupModalVisible.value = true;}function closeGroupModal() {groupModalVisible.value = false;groupName.value = "";selectedFieldIndexes.value = [];}function editField(index) {const field = currentContent.value[index];ElMessageBox.prompt("请输入新的名称", "编辑名称", {confirmButtonText: "确认",cancelButtonText: "取消",inputValue: field.title,inputPattern: /\S/,inputErrorMessage: "请输入新的分组名称",beforeClose: (action, instance, done) => {if (action === "confirm") {const inputValue = instance.inputValue?.trim();const newList = currentContent.value.filter((el, tmpIndex) => tmpIndex !== index);console.log(newList);const tmp = newList.some(el => el.title === inputValue);if (tmp) {ElMessage.warning("分组名称不能重复");} else {done();}} else {done();}},}).then(({ value }) => {const trimmedValue = value.trim();if (trimmedValue) {currentContent.value[index].title = trimmedValue;ElMessage.success("名称修改成功");}}).catch(() => {});}function deleteField(index) {const field = currentContent.value[index];ElMessageBox.confirm("确定要删除这个分组吗？分组内的字段将转为独立字段", "删除确认", {type: "warning",}).then(() => {const newList = [];if (field.children && field.children.length > 0) {field.children.forEach(child => {newList.push({...child,});});}currentContent.value.splice(index, 1, ...newList);ElMessage.success("删除成功");}).catch(() => {});}function createGroup() {const trimmedName = groupName.value;if (!trimmedName) {ElMessage.warning("请输入分组名称");return;}const tmp = currentContent.value.some(el => el.title === trimmedName);if (tmp) {ElMessage.warning("分组名称不能重复");return;}if (selectedFieldIndexes.value.length === 0) {ElMessage.warning("请至少选择一个字段");return;}// 新增分组逻辑const selectedFields = selectedFieldIndexes.value.map(index => nonGroupedFields.value[index]);const newGroup = { title: trimmedName, dataIndex: trimmedName, children: selectedFields };const selectedDataIndexes = selectedFields.map(f => f.dataIndex);// 更新字段数据currentContent.value = currentContent.value.filter(item => {if (item.children) {return !item.children.some(child => selectedDataIndexes.includes(child.dataIndex));}return !selectedDataIndexes.includes(item.dataIndex);});currentContent.value.unshift(newGroup);// 同步给父组件closeGroupModal();ElMessage.success("分组创建成功");}</script><style lang="scss" scoped>.column_content {padding: 12px;border: solid 1px #eeeeee;background-color: #f6f6f6;max-height: 60vh;overflow-y: auto;.column_header {padding: 10px 5px 10px 10px;}.group-container {margin-bottom: 10px;}.column_row {padding: 10px;cursor: url("@/assets/cursor.svg"), auto;border-bottom: solid 1px #eeeeee;font-size: 14px;background-color: #fff;margin-bottom: 10px;&.column_child {margin-bottom: 0;}&:hover {box-shadow: 0px 0px 20px 5px rgba(116, 116, 116, 0.11);background-color: transparent;}&:active {box-shadow: none;}.drag_icon {margin-right: 5px;width: 14px;height: 14px;display: inline-block;vertical-align: text-top;}.column_title {margin: 0px 10px;color: rgba(23, 26, 29, 0.6);text-align: center;}}.column_row.hideShadow {box-shadow: none;}.custom_drag_class {box-shadow: 0px 0px 20px 5px rgba(116, 116, 116, 0.11);border: 0.5px solid #0089f9;color: #0089f9;}.custom_drag_class .column_title {color: #0089f9;}}.modal-body {padding: 20px;max-height: 60vh;overflow-y: auto;.form-group {margin-bottom: 20px;.fields-selection {width: 100%;border: 1px solid #e9ecef;border-radius: 6px;max-height: 300px;overflow-y: auto;.field-option {padding: 12px;border-bottom: 1px solid #f1f3f4;display: flex;align-items: center;cursor: pointer;transition: background 0.3s ease;.field-checkbox {margin-right: 10px;}}.field-option:last-child {border-bottom: none;}.field-option:hover {background: #f8f9fa;}.field-option.selected {background: #e3f2fd;color: #1976d2;}}}}</style>