# 【查询场景】示例

# 举个例子：服务包查询列表页面

在这个页面中上面是一个表单，表单有服务包名称、服务包状态两个字段，点击查询按钮可以查询到对应的数据。下面是一个表格，表格上一个操作区域，表格里面包括了服务包ID、服务包名称、服务包价格、服务包权益等等列，可以对每一列进行查看和删除等等的操作，表格下方有一个分页，可以切换每页显示条目个数，总条目数，总页数，点击页码可以查询对应的数据。

# 实战开发

搜索页面开发示例

<template>
<div style='height:600px'>
  <bst-page backgroundColor="#edeff4">
    <bst-module header>
      <best-form type="search" for="table_brand">
        <bst-form-item node="select" name="brand" clearable placeholder='请选择品牌' :options="options"></bst-form-item>
        <bst-form-item node="select" name="status" clearable placeholder='请选择状态' :options="options"></bst-form-item>
      </best-form>
    </bst-module>
    <bst-module main>
      <best-table id="table_brand" ref="table" :ajax="ajax">
        <template #action>
          <bst-button type="primary">新增投放</bst-button>
        </template>
        <bst-table-cell type="index" label="序号" align="center" width="64"></bst-table-cell>
        <bst-table-cell prop="settingName" label="品牌名称" min-width="100" align="center"></bst-table-cell>
        <bst-table-cell prop="settingUri" label="已投放数量" min-width="250" align="center"></bst-table-cell>
        <bst-table-cell prop="creator" label="展示方式" min-width="100" align="center"></bst-table-cell>
        <bst-table-cell prop="createTime" label="下单弹窗" min-width="180" align="center"></bst-table-cell>
        <bst-table-cell prop="updater" label="更新人" align="center"></bst-table-cell>
        <bst-table-cell prop="updateTime" label="更新时间" min-width="200" align="center"></bst-table-cell>
        <bst-table-cell prop="updateTime" label="状态" min-width="200" align="center"></bst-table-cell>
        <bst-table-cell action>
          <template #default="scope">
            <bst-button v-if="scope.index>=0" type="text" textColor="green" size="small">上架</bst-button>
            <bst-button v-if="scope.index>=1" type="text" textColor="red" size="small">下架</bst-button>
            <bst-button v-if="scope.index>=2" type="text" size="small" @click="onClickAction('edite',scope)">编辑</bst-button>
            <bst-button v-if="scope.index>=3" type="text" size="small" @click="onClickAction('placement',scope)">投放</bst-button>
            <bst-button v-if="scope.index>=4" type="text" textColor="red" size="small">删除</bst-button>
          </template>
        </bst-table-cell>
      </best-table>
    </bst-module>
  </bst-page>
</div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        options: Object.freeze([
          {label: '选项1', value: 1},
          {label: '选项2', value: 2},
          {label: '选项3', value: 3},
        ]),
        ajax: {
          method: 'get',
          url: '/element-ui-best-doc/mock/list.json',
        }
      }
    },
    methods: {
      onClickAction(type, data) {
        console.log(type, data)
      }
    }
  }
</script>

← 页面增加场景 →