让输入框和表格实现联动效果，在获取数据源时做相应判断，为何获取不到数据了？

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

<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>

data () {
    return {
      inputContent: '',
      searchContent: '',
      allData: [],
      columnList: [],
      total: 1000,
      currentPage: 1,
      pageSize: 12
    }
  },

computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    tables () {
      const search = this.searchContent.toLowerCase()
      // 判断：输入框没有输入值，那么标识变量同空
      if (this.inputContent === '') {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.searchContent = ''
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.currentPage = 1
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.total = this.allData.length
        // eslint-disable-next-line no-array-constructor
        const result = new Array(this.allData, this.total)
        return result
      }
      // 判断：如果输入框有值
      if (search !== '') {
        // 先filter()过滤出对象数组
        // some()方法用来测试数组是否满足条件
        // String 对象用于表示和操作字符序列
        // toLowerCase()：把字符串的数字全部转换为小写。这样在输入框中无论是大小写都无所谓，都能搜索到
        // includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false
        const newArr = this.allData.filter((dataNews) => {
          return Object.values(dataNews).some((value) => {
            return String(value).toLowerCase().includes(search)
          })
        })
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.allData = newArr
        const newArrLen = this.allData.filter((dataNews) => {
          return Object.keys(dataNews).some(key => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        }).length
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.total = newArrLen
        const result = [this.allData, this.total]
        return result
      }
      return this.allData
    }
  },

回答：

methods: {
  updateData() {
    const search = this.inputContent.toLowerCase()
    if (this.inputContent === '') {
      this.searchContent = ''
      this.currentPage = 1
      this.total = this.allData.length
    } else if (search !== '') {
      const newArr = this.allData.filter((dataNews) => {
        return Object.values(dataNews).some((value) => {
          return String(value).toLowerCase().includes(search)
        })
      })
      this.allData = newArr
      const newArrLen = this.allData.filter((dataNews) => {
        return Object.keys(dataNews).some(key => {
          return String(dataNews[key]).toLowerCase().indexOf(search) > -1
        })
      }).length
      this.total = newArrLen
    }
  }
},
computed: {
  tables () {
    return this.allData
  }
},
watch: {
  inputContent: {
    handler() {
      this.updateData()
    },
    immediate: true
  }
}

回答：

computed: {
    total(){
        // 看不出你的分页有啥用，也没用到啊
        // 按理说total的值是allData的长度，然后tables根据currentPage、pageSize等分页数据进行裁切
        return this.tables.length
    },
    tables () {
      const search = this.searchContent.toLowerCase()
      // 判断：输入框没有输入值，那么标识变量同空
      if (this.inputContent === '') {
        this.searchContent = ''
        this.currentPage = 1
        return this.allData // 这里应该根据currentPage、pageSize等分页数据进行裁切
      }
      // 判断：如果输入框有值
      if (search !== '') {
        const newArr = this.allData.filter((dataNews) => {
          return Object.values(dataNews).some((value) => {
            return String(value).toLowerCase().indexOf(search) > -1
          })
        })
        return newArr // 这里应该根据currentPage、pageSize等分页数据进行裁切
      }
      return this.allData // 这里应该根据currentPage、pageSize等分页数据进行裁切
    }
  },

以上是 让输入框和表格实现联动效果，在获取数据源时做相应判断，为何获取不到数据了？ 的全部内容， 来源链接： utcz.com/p/934682.html