weixin_58412143 2022-12-29 08:47 采纳率: 91.6%
浏览 38
已结题

vuedraggable组件怎么动态设置拖拽容器每个模块的宽高

怎么动态设置拖拽容器每个模块的宽高?代码如图,
想要部分拖拽模块在右侧容器里在一行显示,我是用组件的形式写的拖拽模块,然后在父组件中显示容器页面

img

  • 写回答

1条回答 默认 最新

  • 普通网友 2023-01-01 11:29
    关注

    回答不易,求求您点赞采纳哦

    在 Vue.js 中,您可以使用v-for指令循环数组并在右侧容器的每一行中显示拖放模块。这是您如何执行此操作的示例:

    <template>
      <div class="right-container">
        <template v-for="(item, index) in items">
          <drag-and-drop-module :key="index" :item="item" />
        </template>
      </div>
    </template>
    
    <script>
    import DragAndDropModule from './DragAndDropModule.vue'
    
    export default {
      components: {
        DragAndDropModule
      },
      data () {
        return {
          items: [
            { id: 1, name: 'Item 1' },
            { id: 2, name: 'Item 2' },
            { id: 3, name: 'Item 3' }
          ]
        }
      }
    }
    </script>
    

    此代码为数组DragAndDropModule中的每一项显示一行中的组件。items该key属性用于为每个组件提供唯一标识符,这在使用 Vue.js 渲染列表时很重要。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    weixin_58412143 2023-01-03 01:06

    我是想要某一行里有三个模块横向排列,这个怎么设置?给循环的div加上样式之后每个模块都变了,我想要根据每个模块设置不同的宽高

    回复
    weixin_58412143 回复 weixin_58412143 2023-01-10 07:58

    使用grid-layout

    回复
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 1月17日
  • 已采纳回答 1月10日
  • 创建了问题 12月29日

悬赏问题

  • ¥15 centos7.6进不去系统,卡在数字7界面
  • ¥15 Tensorflow采用interpreter.allocate_tensors()分配内存出现ValueError: vector too long报错
  • ¥15 使用CGenFF在线生成血红素辅基拓扑结构遇到问题
  • ¥15 在fragment使用okhttp同步上传文件,能不能在fragment销毁后还可以继续上传文件?
  • ¥20 matlab代码实现可达矩阵形成骨骼矩阵
  • ¥15 关于地板的木纹和图库中的匹配的
  • ¥30 机器学习预测疾病模型流程疑问
  • ¥50 2048Python实现
  • ¥15 使用ads进行低噪放仿真没有结果且不报错
  • ¥15 关于#python#的问题:有偿求一个千寻框架找书机器人插件
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部