Element Table实现用户自定义列_el-table自定义列-优快云博客

本文链接：https://blog.youkuaiyun.com/hejingfang123/article/details/120364250

本文介绍了如何在Vue.js中利用Element UI的Table组件实现用户自定义列的功能。通过允许用户选择要显示的列，提高了程序的可扩展性和用户体验。文章详细阐述了从获取数据库列信息到前端渲染、用户选择列的处理，以及如何根据用户选择动态展示数据的过程，同时也探讨了固定列如操作列的处理方法和列宽的调整策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：文件列表用户自定义

基础：之前已经实现了文件列表的功能，但是是固定表头的列表

期初，我们是根据用户提出的要求展示相应的列，没有做过多的考虑，因此，我们当时直接固定了列名。这样做其实大大限制了程序的可扩展性，如果用户使用过程中发现我需要的没有这么多列或者我想要更多的列的时候怎么办？只能改代码，严重违反了软件设计的开放封闭的原则，因此，在功能设计的时候要考虑的全面一点，不能不听用户的，但是也不能全听用户的，要有全局观。

基础代码实现：

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

    <el-table
        //绑定对象数组
        :data="tableData"
        //带斑马纹的表格
        stripe
        //带有纵向边框
        border
        class="table"
        //当某一行被点击时会触发该事件
        @row-click="openDetails"
      >
        <el-table-column
          //对应列内容的字段名，
          prop="projectname"
          //列宽
          width="100"
          //显示的标题
          label="项目名"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="name"
          width="100"
          label="文件名"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="type"
          width="100"
          label="文件类型"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="url"
          width="350"
          label="文件地址"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-if="
                ['video', 'application', 'audio', 'pdf'].includes(
                  scope.row.type
                )
              "
            >
              <el-button
                type="text"
                icon="el-icon-plus"
                @click="addQuestion(scope.row)"
                >添加问题</el-button
              >
              <el-button
                type="text"
                icon="el-icon-delete"