vue框架下的后台管理系统页面组件封装-巧妙利用，让开发事半功倍！

2023-10-08 03:49:19

在构建后台管理系统时，页面组件扮演着至关重要的角色。通过封装通用且灵活的组件，开发者能够高效地创建出美观、一致且功能强大的用户界面。而Vue.js作为时下流行的前端框架，提供了丰富的组件生态，让组件封装变得更加简单、高效。

在本文中，我们将重点探讨在Vue框架下，如何对常用的后台管理系统页面组件进行封装，并以table表格组件、search表格组件和dialog弹框为例，详细介绍具体封装实现。

封装table表格组件

table表格组件是后台管理系统中不可或缺的元素，用来展示和编辑数据。我们可以利用Vue.js的强大组件系统，将table组件进行封装，以便在不同场景下灵活复用。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  },
  template: `
    <el-table :data="data">
      <el-table-column v-for="column in columns" :prop="column.prop" :label="column.label"></el-table-column>
    </el-table>
  `
})

在这个table组件中，我们通过props属性接收数据和列定义，并利用Vue.js的模板语法渲染表格。如此一来，开发者在使用该组件时，只需提供数据和列定义即可，无需关心底层实现细节。

封装search表格组件

search表格组件是后台管理系统中另一个常用的元素，用于对数据进行过滤和搜索。我们可以同样利用Vue.js的组件系统，对search组件进行封装。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  },
  template: `
    <el-form :model="searchForm">
      <el-row>
        <el-col :span="8">
          <el-input v-model="searchForm.name" placeholder="请输入名称"></el-input>
        </el-col>
        <el-col :span="8">
          <el-input v-model="searchForm.age" placeholder="请输入年龄"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
  `,
  data() {
    return {
      searchForm: {}
    }
  },
  methods: {
    onSearch() {
      // 根据搜索条件过滤数据
      this.data = this.data.filter(item => {
        return item.name.indexOf(this.searchForm.name) !== -1 && item.age === this.searchForm.age
      })
    }
  }
})

在这个search组件中，我们同样通过props属性接收数据和列定义，并在组件内部定义了搜索表单和搜索方法。开发者在使用该组件时，只需提供数据和列定义，并实现onSearch方法即可。

封装dialog弹框组件

dialog弹框组件是后台管理系统中经常用到的元素，用于展示重要信息或进行数据编辑。我们可以同样利用Vue.js的组件系统，对dialog组件进行封装。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <el-dialog :title="title" :visible.sync="visible">
      <p>{{ content }}</p>
      <el-button type="primary" @click="onClose">关闭</el-button>
    </el-dialog>
  `,
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    }
  }
})