vue获取查询列表数据

搜索条件 列表数据

html:

<!-- 查询条件  -->
<div class="evaluateList_seach">
  <a-form layout="inline" :model="searchForm">
    <a-row>
      <a-col :span="18">
        <a-row>
          <a-col :span="8" style="display: flex; white-space: nowrap">
            <a-form-item label="模版名称：">
              <a-input
                v-model:value="searchForm.name"
                placeholder="请输入模版名称"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col
        :span="6"
        style="display: flex; justify-content: flex-end; flex-wrap: wrap"
      >
        <a-form-item style="width: auto">
          <a-button type="primary" @click="search">查询</a-button>
        </a-form-item>
        <a-form-item style="width: auto">
          <a-button @click="resetSearch">重置</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</div>

<!-- 列表数据  -->
<div class="EvaluateList_container">
  <div
    style="
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      padding: 20px;
    "
  >
    <a-button type="primary" @click="addList">新增</a-button>
  </div>

  <a-table
    :columns="columns"
    :data-source="searchForm.tableData"
    :pagination="pagination"
    @change="handleTableChange"
    :loading="tableLoading"
    rowKey="id"
    style="padding-right: 10px"
  >
    <template #index="{ index }">{
   
   { index + 1 }}</template>
    <template #action="{ record }">
      <a href="javascript:void(0)" @click="toManagementPage(record)"
        >指标管理</a
      >
      &nbsp;&nbsp;
      <a href="javascript:void(0)" @click="editList(record)">编辑模板</a>
      &nbsp;&nbsp;
      <a href="javascript:void(0)" @click="removeList(record)">删除</a>
    </template>
  </a-table>
</div>

js:

import {
    column,
    paginations
} from "./EvaluateListJson"
setup() {
        //搜索条件
        let searchForm = reactive({
            current: 1,
            size: 10,
            name: "", //模板名称
            tableData: [], //列表table
        })
        //列表数据
        const columns = reactive(column)
        //分页
        let pagination = reactive(paginations)
        const handleTableChange = (paginationing) => {
            console.log("分页")
            pagination.current = paginationing.current;
            pagination.pageSize = paginationing.pageSize;
            searchForm.current = paginationing.current;
            searchForm.size = paginationing.pageSize;
            getTargetTemplatePage()
        }
        //loading
        let tableLoading = ref(false)
        //查询
        const search = () => {
            getTargetTemplatePage()
        }
        //搜索查询列表
        const getTargetTemplatePage = () => {
            tableLoading.value = true
            post(API.ability.getTargetTemplatePage, {
                    params: {
                        current: searchForm.current,
                        size: searchForm.size,
                        name: searchForm.name
                    }
                })
                .then((res) => {
                    console.log(res.data)
                    tableLoading.value = false
                    searchForm.tableData = res.data.records
                    pagination.total = res.data.total
                    pagination.pageSize = res.data.size
                })
                .catch((res) => {
                    pagination.total = 0
                    tableLoading.value = false
                    message.error(res);
                });
        }
        //重置
        const resetSearch = () => {
            searchForm.current = 1
            searchForm.size = 10
            searchForm.name = ""
            getTargetTemplatePage()
        }
        onMounted(() => {
            getTargetTemplatePage()
        })
        return {
            searchForm, //搜索条件
            columns, //列表数据
            //分页
            pagination,
            handleTableChange,
            tableLoading, //loading
            //查询按钮
            search,
            resetSearch
        }
},

json.js数据源文件

export const column = [{
    title: '序号',
    dataIndex: 'index',
    key: 'id',
    slots: {
        customRender: 'index'
    },
    ellipsis: true,
    align: 'center',
    width: "120px"
}, {
    title: '模板名称',
    dataIndex: 'name',
    key: 'id',
    ellipsis: true,
    align: 'center'
}, {
    title: '模板说明',
    dataIndex: 'templateDescription',
    key: 'id',
    ellipsis: true,
    align: 'center'
},
{
    title: '操作',
    dataIndex: 'x',
    key: 'id',
    slots: {
        customRender: 'action'
    },
    ellipsis: true,
    align: 'center',
    width: "320px"
},]
//分页
export let paginations = {
    total: 0,
    pageSize: 10, //每页中显示10条数据
    showSizeChanger: true,
    pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
    showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
}