关于element-ui-plus使用el-col和el-row在特定列实现一个表格的方法

根据我的尝试以下结构能在特定列实现一个表格

<template>
  <el-row>
    <el-col :span="12"> </el-col>
    <el-col :span="12">
      <div style="display: flex"> #关键点1:使列能添加在同一行
        <el-col :span="8">
          <el-row>这是第一行第一列</el-row>
          <el-row>这是第二行第一列</el-row>
          <el-row>这是第三行第一列</el-row>
        </el-col>
        <el-col :span="8">
          <el-row>这是第一行第二列</el-row>
          <el-row>这是第二行第二列</el-row>
          <el-row>这是第三行第二列</el-row>
        </el-col>
        <el-col :span="8">
          <el-row>这是第一行第三列</el-row>
          <el-row>这是第二行第三列</el-row>
          <el-row>这是第三行第三列</el-row>
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>

使用flex后,相当于对列进行换行操作,不是对行进行分列操作,后者操作会有问题。

效果图:

有不懂的可以用开发者工具看看,如果还有问题留言。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
dv-scroll-board是一个基于Vue.js的滚动展示组件,可以用于展示图片、文字等内容。如果你想在dv-scroll-board中插入el-ui的定制元素,可以按照以下步骤进行操作: 1. 在你的Vue组件中引入el-ui组件库,并注册需要使用的组件。 2. 在dv-scroll-board组件中使用slot插槽,将需要插入的el-ui组件放入插槽中。 3. 在插入的el-ui组件中设置样式,以适应dv-scroll-board的展示效果。 下面是一个示例代码,演示了如何在dv-scroll-board中插入el-ui的定制元素: ``` <template> <dv-scroll-board :data="data"> <template #default="{ item }"> <el-card class="scroll-item"> <el-image :src="item.imgUrl"></el-image> <el-divider></el-divider> <el-row> <el-col :span="12">{{ item.title }}</el-col> <el-col :span="12">{{ item.date }}</el-col> </el-row> </el-card> </template> <el-button slot="control" icon="el-icon-arrow-left"></el-button> <el-button slot="control" icon="el-icon-arrow-right"></el-button> </dv-scroll-board> </template> <script> import { ElCard, ElImage, ElDivider, ElRow, ElCol, ElButton } from 'element-plus'; export default { components: { ElCard, ElImage, ElDivider, ElRow, ElCol, ElButton, }, data() { return { data: [ { imgUrl: 'https://picsum.photos/200/300', title: 'Lorem ipsum dolor sit amet', date: '2021-10-01', }, { imgUrl: 'https://picsum.photos/200/300', title: 'Consectetur adipiscing elit', date: '2021-10-02', }, { imgUrl: 'https://picsum.photos/200/300', title: 'Sed do eiusmod tempor incididunt', date: '2021-10-03', }, ], }; }, }; </script> <style> .scroll-item { width: 300px; height: 400px; margin: 10px; } </style> ``` 在上面的代码中,我们使用el-card、el-image、el-divider、el-rowel-colel-button等el-ui组件,并将它们放入了dv-scroll-board的插槽中。同时,我们还设置了样式,以适应dv-scroll-board的展示效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值