vue+Elment-UI 动态生成表格、动态生成搜索框

最新推荐文章于 2025-07-10 13:24:12 发布

原创

最新推荐文章于 2025-07-10 13:24:12 发布 · 960 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了如何使用Vue和Element-UI库动态生成表格和搜索框。内容涵盖动态创建包含未知数量表头的表格，以及根据表头信息动态生成搜索框。搜索框的显示文字和绑定值均动态设定，与后台交互时，未填写的查询条件传递为空字符串。

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

vue+Elment-UI 动态生成表格（包括表头，表头的个数、名称都未知）、动态生成搜索框

动态生成的input搜索框：

        <div style="display: inline-block;margin-left:5px" v-for="(item,index) in excel_header_name_list" :key="index">{
   
   {
   
   item.excel_header_name}}:<el-input v-model="fields_value[index]" clearable @keyup.enter.native="getData"></el-input></div>

该搜索框的显示文字（相当于label），和该input绑定的值都是动态的。excel_header_name_list是一个对象数组，存储搜索框显示的文字信息；fields_value是一个数组，存储查询字段的值（这里注意一下，搜索框在没有输入值的时候，会动态生成多少个搜索框，fields_value数组中就会有多少个undefined，而不是空字符串）。（excel_header_name_list和fields_value是需要事先做好排序一一对应的）

动态生成的数据表格：

 <el-table border :data="data_list" v-loading="loading" element-loading-text="loading" height="100%" >
        <el-table

最低0.47元/天解锁文章

200万优质内容无限畅学