Vue Table 前台查询 刷新 和 导出数据

<div class="btn-grp-left">

          <div class="search-input">

            <t-input v-model="searchValue" placeholder="编号/名称" @change="onInput" clearable>

              <template #suffix-icon>

                <search-icon size="16px" />

              </template>

            </t-input>

          </div>&nbsp;

          <t-button theme="success" @click="btnRefresh">刷新</t-button>

          <t-button theme="success" @click="btnExport">导出</t-button>

        </div>

//定义数据

const data = ref([]); //用于列表展示

const data_alllist = ref([]);  //用于后台查询后保存完整数据

//查询输入框--前台执行查询操作

const searchValue = ref('');

const onInput = () => {

  //首先恢复全部数据

  data.value = data_alllist.value;

  //查询数据

  let serkey = searchValue.value;

  let searchData = data.value;

  //多关键字查询

  searchData = searchData.filter(item => item.id.match(serkey) || item.name1.match(serkey)

  );

  // 计算分页和条数

  pagination.value = {

    ...pagination.value,

    total: searchData.length,

  };

  //重新加载数据

  data.value = searchData;

};

//刷新

const btnRefresh = () => {

  searchValue.value = "";

  fetchData();

};


 

//导出

const btnExport = () => {

  const titleObj = {

    编号: "com_ID",

    名称: "com_Name",

    编号2: "id",

    名称2: "name1",

    备注: "name2",

  };

  exportExcel(data.value, '列表', titleObj, "Sheet1");

};

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值