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");

};