萌新菜驴 2023-11-08 11:52 采纳率: 66.7%
浏览 17
已结题

VUE3 element-plus 表格

不会写表格。要求使用vue3可以使用element-plus,也可以不用

img

就是合并行列的表格,求写一个demo出来,别是定死的要可以扩展的,就是我拿到数据后往里一塞就行的。谢谢
别粘贴了。带哥们,我chartGPT查两天没有找到要的效果,需求手写一个,可以加钱,代价

  • 写回答

17条回答 默认 最新

  • 专家-司宇[在线] 2023-11-08 11:56
    关注

    引自强大而免费的微信小程序:皆我工具箱

    可以使用Vue3和Element Plus来实现一个扩展的合并行列的表格。

    首先,确保已经安装了Vue3和Element Plus。可以通过以下命令进行安装:

    npm install vue@next
    npm install element-plus
    

    接下来,我们创建一个包含表格的Vue组件。在这个组件中,我们会使用Element Plus的<el-table>组件来展示表格,并通过span-method属性来合并行列。

    <template>
      <div>
        <el-table :data="tableData" :span-method="rowSpanMethod" border>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="gender" label="性别"></el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    import { reactive } from 'vue'
    
    export default {
      data() {
        return {
          tableData: reactive([
            { name: '张三', age: 19, gender: '男' },
            { name: '李四', age: 20, gender: '男' },
            { name: '王五', age: 22, gender: '女' },
            { name: '赵六', age: 21, gender: '男' },
            { name: '刘七', age: 19, gender: '女' }
          ])
        }
      },
      methods: {
        rowSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0) {
            const rowCount = this.tableData.filter(item => item.name === row.name).length
            if (rowCount > 1) {
              return { rowspan: rowCount, colspan: 1 }
            }
          }
        }
      }
    }
    </script>
    

    在上述代码中,我们通过<el-table>组件的:data属性来绑定表格数据。同时,我们还定义了一个rowSpanMethod方法来处理行合并的逻辑。在这个方法中,通过判断当前列是否为第一列,然后计算出该单元格需要合并的行数,返回给<el-table>组件的span-method属性。

    最后,我们可以在父组件中使用这个表格组件,并传入需要展示的数据:

    <template>
      <div>
        <my-table></my-table>
      </div>
    </template>
    
    <script>
    import MyTable from './MyTable'
    
    export default {
      components: {
        MyTable
      }
    }
    </script>
    

    通过上述代码,我们就可以使用Vue3和Element Plus来实现一个可以扩展的合并行列的表格了。

    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 11月16日
  • 修改了问题 11月8日
  • 创建了问题 11月8日

悬赏问题

  • ¥50 关于#微信小程序#的问题:微信小程序支持h5实现webrtc h264 h265低延迟传输渲染,能付费帮我们解决一下吗
  • ¥20 请问ansys License manager 这个问题如何解决
  • ¥15 memory.limit()' is no longer supported
  • ¥15 基于stm32f4产生两路pwm信号并可由串口通信调节
  • ¥15 C++/QT设置函数调用条件(多个功能调用同一,且各自调用条件不同)
  • ¥15 UE5样条线生成的网格UV问题
  • ¥15 如何用最短的时间大致看懂springboot+vue的项目
  • ¥15 (有偿)懂数值分析和含时变参数微分方程的来
  • ¥15 abaqus随机生成二维颗粒
  • ¥15 安装ansys许可证管理器时出现了这个问题,如何解决?