element组件table表格表头添加下拉框等其他组件

最新推荐文章于 2024-03-26 11:32:25 发布

hjt_未来可期

最新推荐文章于 2024-03-26 11:32:25 发布

阅读量2.3k

点赞数 1

分类专栏： element-ui vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/h_123456___/article/details/113435485

版权

vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

element-ui

5 篇文章

订阅专栏

本文介绍了如何在El-Table组件中为表头添加下拉框，通过使用`<el-table-column>`的`slot-scope`和`slot=header`属性，结合`<el-select>`组件，实现了在列头插入下拉框的功能。示例代码展示了具体的实现步骤，包括设置`v-model`、`multiple`、`collapse-tags`等属性，以及`v-for`循环遍历选项。通过这种方式，可以方便地控制列的显示和隐藏，提供了一种灵活的用户交互方式。

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

最近项目里遇到一个需求，需要在表头添加下拉框组件，来控制列显隐

这次先解决添加下拉框问题，下次解决下拉框控制显隐

首先看官方文件里面给出的添加组件的slot
在这里插入图片描述
一些简单的需求直接用这个方法就可以了
下面直接上代码

<el-table-column label="工单ID" type="index" width="80" fixed>
</el-table-column>
<el-table-column prop="tenantName" label="租户名称" min-width="120">
</el-table-column>
<el-table-column prop="title" align="center" v-if="show1" min-width="190">
  <template slot-scope="scope" slot="header">
    <el-select v-model="colOptions1" multiple collapse-tags size="mini" placeholder="请选择">
      <el-option v-for="item in colSelect1" :key="item" :label="item" :value="item">
      </el-option>
    </el-select>
  </template>
</el-table-column>