13.VUE_Table表单的使用

最新推荐文章于 2024-10-09 07:16:01 发布

橘九。

最新推荐文章于 2024-10-09 07:16:01 发布

阅读量737

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_34400745/article/details/102959907

版权

在Vue.js中，使用el-table组件结合对象数组可以轻松填充表格数据。通过el-table-column的属性映射对象键名展示内容，并利用width设置列宽。当内容过多导致纵向滚动时，只需为el-table设置height属性，即可实现固定表头的效果，简化了实现复杂布局的需求。

摘要由CSDN通过智能技术生成

当el-table元素中注入data对象数组后，
在el-table-column中用prop属性来对应对象中的键名即可填入数据，
用label属性来定义表格的列名。可以使用width属性来定义列宽。
纵向内容过多时，可选择固定表头：只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

<template slot-scope="scope">
    <div>
        <el-table
                ref="multipleTable"
                class="project_list"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">

            <el-table-column
                    type="selection"
                    width