如何实现输入框和表格的联动，实现输入框输入内容查询表格数据？

  • Z时代
  • 2024-02-27
  • 分类：IT

ui:

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/searchone' }">查询数据</el-breadcrumb-item>
      <el-breadcrumb-item>查询数据表1</el-breadcrumb-item>
      <el-breadcrumb-item>查询数据表2</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入查询内容" v-model="inputContent" type="text">
            <el-button slot="append" icon="el-icon-search" @click="searchinput"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="allData" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column v-for="(item, index) in columnList" :key="index" :prop="item.prop"
          :label="item.label"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

js

<script>
export default {
  data () {
    return {
      inputContent: '',
      searchContent: '',
      allData: [],
      columnList: []
    }
  },
  created () {
    this.getAllData()
    this.getColumnList()
  },
  computed: {
    tables () {
      const search = this.searchContent
      if (this.inputContent === '') {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.searchContent = ''
        return this.allData
      }
      if (search !== '') {
        // eslint-disable-next-line no-return-assign
        return [this.allData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        }),
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.count = this.allData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        }).length]
      }
      return this.allData
    }
  },
  methods: {
    getAllData () {
      // const { data: res } = await this.$http.get('')
      const data = [
        { name: '11', age: '11', city: '11' },
        { name: '12', age: '12', city: '12' },
        { name: '13', age: '13', city: '13' },
        { name: '14', age: '14', city: '14' },
        { name: '15', age: '15', city: '15' },
        { name: '16', age: '16', city: '16' }
      ]
      this.allData = data
    },
    getColumnList () {
      const prop = [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'city', label: '城市' }
      ]
      this.columnList = prop
    },
    // 只要点击搜索框，那么输入框里面的值inputContent就会传给searchContent，这是为了防止当输入框输入值后自动搜索
    searchinput () {
      this.searchContent = this.inputContent
      console.log(this.searchContent)
    }
  }
}
</script>

哪里出问题了，没实现效果

回答：

你定义了tables这个计算属性，但是从来没用到它，把模板里的表格区域换成用上它试试:

<el-table :data="tables" border stripe>
  <el-table-column type="index" label="#"></el-table-column>
  <el-table-column v-for="(item, index) in columnList" :key="index" :prop="item.prop" :label="item.label"></el-table-column>
</el-table>

把计算属性里换成这么写:

computed: {
    tables() {
      const search = this.searchContent.toLowerCase();
      if (this.inputContent === '') {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.searchContent = '';
        return this.allData;
      }
      return this.allData.filter((dataNews) => {
        return Object.values(dataNews).some((value) => {
          return String(value).toLowerCase().includes(search);
        });
      });
    }
  }

回答：

我感觉你的Table组件用法是不是用复杂了。

<el-table-column />可以不用columnList去渲染

allData = [
    {
        name: '11',
        age: '11',
        city: '11'
    },
    {
        name: '12',
        age: '12',
        city: '12'
    },
    ...
]

使用：

<el-table :data="allData" border stripe>
    <el-table-column type="index" label="#"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="city" label="城市"></el-table-column>
</el-table>

看看官网用法： https://element.eleme.cn/#/zh-CN/component/table

以上是 如何实现输入框和表格的联动，实现输入框输入内容查询表格数据？ 的全部内容， 来源链接： utcz.com/p/934605.html

回到顶部