Card 卡片

默认插槽自带 space 间距

search 插槽中修改了 el-form-item 的样式，垂直居中

header

Approved by

内容1

内容2

内容3

footer

<template>
  <ql-card>
    <template #header>
      header
    </template>

    <template #search>
      <el-form
        style="background-color: #FAFAFA;"
        :inline="true"
        :model="formInline"
      >
        <el-form-item label="Approved by">
          <el-input
            v-model="formInline.user"
            placeholder="Approved by"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >
            Query
          </el-button>
        </el-form-item>
      </el-form>
    </template>

    <div>
      内容1
    </div>

    <div>
      内容2
    </div>

    <div>
      内容3
    </div>

    <template #footer>
      footer
    </template>
  </ql-card>
</template>

<script setup lang="ts">
const formInline = reactive({
  user: ''
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped lang='scss'></style>

API

Attributes