vite-zfb/src/views/brand/brand.vue

<template>
  <div id="page">
    <searchForm :searchFormData="searchFormData" @handleSearch="handleSearch">
      <template #button>
        <el-button type="success">新增</el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </searchForm>
    <tableForm />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import searchForm from "@/components/searchForm/index.vue";
import tableForm from "@/components/tableForm/index.vue";
export default defineComponent({
  components: { searchForm, tableForm },
  setup(props) {
    const { ctx } = getCurrentInstance();
    const data = reactive({
      searchFormData: {
        btnList: [
          {
            type: "bind",
            text: "绑定主播",
            function: ctx.bindLive,
          },
          {
            type: "add",
            text: "新增",
            function: null,
          },
          {
            type: "edit",
            text: "修改",
            function: null,
          },
          {
            type: "delete",
            text: "删除",
            function: null,
          },
        ],
        searchList: [
          {
            type: "input",
            model: "input_data",
            inputType: "text",
          },
          {
            type: "select",
            model: "select_data",
            options: [
              {
                value: "Option1",
                label: "Option1",
              },
              {
                value: "Option2",
                label: "Option2",
              },
              {
                value: "Option3",
                label: "Option3",
              },
              {
                value: "Option4",
                label: "Option4",
              },
              {
                value: "Option5",
                label: "Option5",
              },
            ],
          },
        ],
      },
    });
    onMounted(() => {});
    const handleSearch = (res) => {
      console.log("handleSearch", res);
    };
    return {
      handleSearch,
      ...toRefs(data),
    };
  },
});
</script>

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