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

Question

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

Answer 1

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