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

**

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%" >
        
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用element-ui的el-table组件和el-input组件来实现表格搜索框。具体实现步骤如下: 1. 在el-table中添加一个slot="header"的template,用于放置搜索框。 2. 在template中添加一个el-input组件,用于输入搜索关键字。 3. 在el-table的data属性中添加一个filterText属性,用于存储搜索关键字。 4. 在el-table的computed属性中添加一个filteredData属性,用于根据搜索关键字过滤数据。 5. 在el-input的v-model属性中绑定filterText,实现搜索框与数据的双向绑定。 示例代码如下: ``` <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <template slot="header"> <el-input v-model="filterText" placeholder="请输入搜索关键字"></el-input> </template> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' }, { name: '赵六', age: 24, address: '深圳市' } ], filterText: '' } }, computed: { filteredData() { return this.tableData.filter(item => { return item.name.toLowerCase().includes(this.filterText.toLowerCase()) || item.address.toLowerCase().includes(this.filterText.toLowerCase()) }) } } } </script> <style> </style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值