VUE el-table列表搜索功能-纯前端实现

本文介绍了如何在Vue项目中使用el-table组件,实现前端纯前端方式的数据搜索筛选功能,无需调用后端接口,通过监听关键词变化实时过滤列表数据。
摘要由CSDN通过智能技术生成

背景:

对el-table数据进行搜索筛选,但是不想调取接口,纯前端实现

直接看代码:

<template>
  <div class="project-container">
    <SearchInputVue :keyword.sync="keyword" :placeholder="placeholderWords" style="margin-bottom: 20px" />
    <div class="table">
      <DefectList :defect-list="keyword ? filterDefectList : defectList" :total="fetchListPageData.total" :on-page-change="pageChange" />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

import SearchInputVue from '@/components/Input/SearchInput.vue'
import DefectList from './components/DefectList.vue'
// import Info from '@/mock.json'
import API from '@/api'
import { warn } from '@/utils/common'

export default Vue.extend({
  name: 'Index',
  components: {
    SearchInputVue,
    DefectList
    // TypeIcon
  },
  data() {
    return {
      defectList: [],
      filterDefectList: [],
      placeholderWords: '搜索缺陷',
      keyword: '',
      fetchListPageData: {
        total: 0,
        page: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    keyword(newVal) {
      const keyVal = newVal.replace(' ', '')
      this.filterDefectList = keyVal ? this.defectList.filter(item => item.title.includes(keyVal)) : this.defectList
    }
  },
  created() {
    this.getDefectList()
  },
  methods: {
    async getDefectList() {
      try {
        const res = await API.Defect.defectListData({
          keyword: '',
          page: this.fetchListPageData.page,
          pageSize: this.fetchListPageData.pageSize
        })
        this.defectList = res.data.list
        this.fetchListPageData.total = res.data.total
      } catch (error) {
        warn(error, true)
      }
    },
    pageChange(current: number) {
      this.fetchListPageData.page = current
      this.getDefectList()
    }
  }
})
</script>

<style lang="stylus" scoped>
.project-container {
  .project-name {
    img {
      position: relative;
      top: 3px;
    }
  }
}
</style>

searchInput.vue

<template>
  <el-input v-model="_keyword" :placeholder="placeholder" class="search" @change="$emit('trigger-event', _keyword)">
    <img slot="prefix" class="search-icon" src="@/image/search.svg" alt="search" />
  </el-input>
</template>

<script>
export default {
  name: 'SearchInput',
  props: {
    placeholder: {
      type: String,
      default: '请输入要搜索的内容'
    },
    keyword: {
      type: String,
      default: ''
    }
  },
  computed: {
    _keyword: {
      set: function (val) {
        this.$emit('update:keyword', val)
      },
      get: function () {
        return this.keyword
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.search {
  width: auto;

  /deep/ .el-input__prefix {
    margin-left: 10px;
    line-height: 40px;
  }

  /deep/ .el-input__inner {
    padding-left: 54px;
    width: 305px;
    // height: 56px;
    border-radius: 5px;
    background-color: rgba(34, 37, 41, 1);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    font-weight: normal;
    font-size: 16px;
    line-height: 32px;
    color: #fff;
  }

  /deep/ .el-input__suffix {
    .el-input__suffix-inner {
      border-color: none;
      position: relative;

      .el-icon-circle-close:before {
        content: '\e6db' !important;
        font-size: 24px;
        color: #387DFF;
        right: 20px;
        top: -7px;
        position: absolute;
      }
    }
  }
}

.search-icon {
  vertical-align: middle;
  line-height: 40px;
}
</style>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue中的el-table组件是一个强大的表格组件,它可以方便地展示大量数据,并且支持分页功能。同时,借助前端库file-saver,我们可以实现el-table中的数据导出为Excel文件。 要实现这个功能,首先需要在Vue项目中安装file-saver库。可以使用npm或者yarn命令进行安装。 安装完毕后,我们可以在需要导出Excel的页面中引入file-saver库。 import { saveAs } from 'file-saver'; 在el-table的数据源中,我们通常会使用一个数组来存储表格的数据。假设我们的表格数据为tableData,我们可以通过将这个数组转换为Excel文件来实现导出功能。 首先将表格数据转换为二维数组的形式,使得每一行的数据存储在一个小数组中。 const exportData = tableData.map(row => { return Object.values(row); }); 然后,我们可以使用file-saver库提供的saveAs函数来将数据导出为Excel文件。我们需要将二维数组导出为一个csv格式的文本文件,并使用saveAs函数保存文件。 const csvContent = exportData.map(row => row.join(",")).join("\n"); const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8" }); saveAs(blob, "export.csv"); 在上述代码中,我们首先将二维数组通过map和join方法转换为一个csv格式的字符串,然后使用Blob创建一个Blob对象,最后使用saveAs函数将Blob对象保存为一个名为export.csv的文件。 通过上述步骤,我们就可以实现Vue中使用file-saver库将el-table中的分页数据导出为Excel文件。导出的文件可以方便地在Excel中查看和处理。 ### 回答2: Vueel-table组件和FileSaver,可以实现前端导出Excel并导出分页数据的功能。 首先,我们需要引入el-table和FileSaver库,并确保已经正确配置了Vue项目。然后,在组件中使用el-table,并将分页数据绑定到el-table的data属性上。 接下来,我们需要添加一个导出按钮,用于触发导出操作。当按钮被点击时,我们可以通过el-table的方法将分页数据转换为一个二维数组,并使用FileSaver库将该数组导出为Excel文件。 具体实现步骤如下: 1. 引入el-table和FileSaver库: ``` import FileSaver from 'file-saver'; import { ElTable, ElTableColumn } from 'element-ui'; ``` 2. 在组件中使用el-table,并将分页数据绑定到data属性上: ``` <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> ... </el-table> </template> <script> export default { data() { return { tableData: [], // 分页数据 ... }; }, ... }; </script> ``` 3. 添加一个导出按钮,并在按钮的点击事件中执行导出操作: ``` <template> <el-table :data="tableData"> ... </el-table> <el-button @click="exportExcel">导出Excel</el-button> </template> <script> export default { ... methods: { exportExcel() { const data = this.$refs.table.store.states.data; // 获取所有数据 const columns = this.$refs.table.columns.map(column => column.label); // 获取表头 const tableData = [columns, ...data]; // 构造二维数组 const worksheet = XLSX.utils.aoa_to_sheet(tableData); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([excelBuffer], { type: 'application/octet-stream' }); FileSaver.saveAs(blob, 'data.xlsx'); }, ... } }; </script> ``` 以上代码通过el-table的$refs属性获取到el-table的实例,从而可以获取到所有数据和表头,并进行导出操作。最后使用FileSaver库将二维数组保存为Excel文件,文件名为data.xlsx。 通过以上步骤,我们可以实现vue el-table前端导出Excel并导出分页数据的功能。 ### 回答3: 在使用vue el-table和file-saver前端库导出Excel时,默认情况下只会导出当前展示页面的数据,无法导出分页数据。但我们可以通过以下步骤来实现导出分页数据的功能。 首先,我们需要手动获取所有需要导出的数据。可以通过向后端发送请求获取所有数据的接口,并在前端将返回的数据进行合并。 然后,使用file-saver库将合并后的数据导出为Excel文件。可以使用Blob对象将数据转换为二进制文件,再通过saveAs方法将二进制文件保存为Excel文件。 最后,展示给用户下载链接或直接自动下载导出的Excel文件。 这样,我们就可以实现使用vue el-table和file-saver前端库导出分页数据的功能。 需要注意的是,如果数据量较大,一次性获取全部数据可能会影响前端性能和用户体验。因此,可以考虑在导出功能中添加限制,例如设置最大导出数量或者提供导出当前页和导出全部数据的选项供用户选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值