
## 没有快速搜索栏的表格

```html
<template>
  <div class="test-container">
    <cl-table
      ref="myTable"
      :data="data"
      just-show-search
      :page-result="pageResult"
      quick-search-props="title,author"
      :custom-table-height="height"
      :quick-search-width="300"
      multi-view-switch
      :page-sizes="[20, 50, 100, 200, 300, 500]"
      hide-page-sizes
      pagination-justify="end"
      @loading="loadData"
      @export="exportData"
      @card-click="card => $message(card.title)"
      @view-change="cardView => $message(JSON.stringify(cardView))"
      @selection-change="selection => $message(JSON.stringify(selection))"
    >
      <template #toolbar>
        <el-button type="primary" size="small">添加</el-button>
        <el-button size="small" v-popconfirm="{before:removeValid,confirm:handleRemove}">删除</el-button>
      </template>
      <template #search>
        <cl-table-search-panel v-model="searchModel" :label-width="100" :divide="4" is-flex-layout>
          <cl-table-search-field placeholder="请输入关键词 流程编号/主题/发起人/所属组织/系统" prop="title,author" 
          enter-to-search
          display-style="block" prefix-icon="el-icon-search" hide-label :width="360"/>
          <cl-table-search-field
            label="创建时间"
            prop="pageViews"
            type="daterange"
            :span="10"
            :label-width="80"
            :width="290"
          />
          <cl-table-search-field label="作者(用户选择器)" prop="author" v-model="searchModel.author" hide-label>
            <cl-user-selector-input v-model="searchModel.author" />
          </cl-table-search-field>
        </cl-table-search-panel>
      </template>
      <template #card="{ item }">
        <div class="cl-table__card-item">
          <el-image :preview-src-list="imageList" :src="item.img"></el-image>
          <span>{{ item.title }}</span>
        </div>
      </template>
      <template #default>
        <cl-table-column type="index" width="50" required align="center" label="序号" />
        <cl-table-column
          prop="title"
          label="标题"
          min-width="200"
          :sortable="true"
          :show-overflow-tooltip="true"
        />
        <cl-table-column prop="author" width="120" :required="true" label="作者" :sortable="true" />
        <cl-table-column label="头像">
          <template #default="{ row }">
            <el-image :preview-src-list="imageList" :src="row.smallImg"></el-image>
          </template>
        </cl-table-column>
        <cl-table-column prop="pageViews" label="点击量" sortable />
        <cl-table-column label="状态" width="100" :filters="statusAry">
          <template #default="{ row }">
            <el-tag :type="statusMap(row.status, 'type')">
              {{ statusMap(row.status, 'text') }}
            </el-tag>
          </template>
        </cl-table-column>
        <cl-table-column label="操作">
          <template #default>
            <el-button type="text" @click="$message('编辑')">编辑</el-button>
          </template>
        </cl-table-column>
      </template>
    </cl-table>
  </div>
</template>
<script>
  import { getList } from '$exp/api/table'

  export default {
    name: 'TableTest',
    data() {
      return {
        data: [],
        searchModel: {
          author: null,
          authorId: null,
        },
        statusAry: [
          { text: '成功', value: 'published', type: 'success' },
          { text: '草稿', value: 'draft', type: 'gray' },
          { text: '已删除', value: 'deleted', type: 'danger' },
        ],
        imageList: [],
        pageResult: {
          page: 1,
          pageSize: 20,
          total: 999,
        },
      }
    },
    computed: {
      statusMap() {
        return (status, prop) => {
          return this.statusAry.find((m) => m.value === status)[prop]
        }
      },
      height() {
        return this.$baseTableHeight()
      },
    },
    methods: {
      loadData(param, cb) {
        getList(param)
          .then((response) => {
            this.data = response.data
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.totalCount,
            }
          })
          .finally(() => cb())
      },
      removeValid(){
        if(this.$refs.myTable.selection.length == 0){
          this.$message({message: '请至少选择一条记录', type:'warning'})
          return false
        }
        return true
      },
      handleRemove(){
        // TODO 删除数据 then
        // req.reomve(this.$refs.myTable.selection)
        this.$refs.myTable.load()
      },
      exportData() {
        this.$message('导出数据')
      },
    },
  }
</script>
<style lang="scss">
  .cl-table__card-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    span {
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>
<!-- table1.vue -->
```
