Vue 后台开发时的常用组件

搜索框的封装

src\components\searchBox.vue

<script setup>
import {ref} from 'vue'
const formName = ref('')

// 接收数据
 defineProps({
    title:String,
    tips:String
})

const emit = defineEmits(['formName'])

// 传值
const cli = () => {
    emit('formName',formName.value)
}

</script>

<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item :label="title+':'">
                <el-input  :placeholder="tips" v-model="formName" class="inp"></el-input>
                <el-button @click="cli" type="primary">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>


.inp {
    width: 220px;
    margin-right: 20px;
}
</style>

使用：

 <!-- 搜索栏 -->
    <search-box @formName="formName" :title="title" :tips="tips"></search-box>

分页器的封装

src\components\pagingModule.vue

<script setup>
const prpos = defineProps({
    total: Number,    // 分页-总数   
    pageSize: Number,  // 每页显示条目个数
})

const emit = defineEmits(['editPageSize','editpage'])
const handleSizeChange = (e) => {
    // prpos.pageSize = e
    console.log('pageSize 改变时会触发',e,prpos.pageSize)
    emit('editPageSize', e)
}
const handleCurrentChange = (e) => {
    console.log('currentPage 改变时会触发', e)
    emit('editPage', e)
}

</script>

<template>
  <div>
    <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[5, 7, 10]" :page-size="pageSize"
                layout="total, prev, pager, next, sizes, jumper" :total="total">
            </el-pagination>
        </div>
  </div>
</template>

<style scoped>
.block {
    float: right;
    margin-top: 20px;
}
</style>

使用

<!-- 分页 -->
<paging-module @editPageSize="editPageSize" @editPage="editPage" :total="total" :pageSize="pageSize"></paging-module>

列表的封装

<script setup>
import { onMounted } from 'vue'

const prpos = defineProps({
    tableData: Array, //表格数据
    listTop: Array,    // 表格头部
})

onMounted(() => {
    console.log('表格数据', prpos.tableData)
    console.log('表格头部', prpos.listTop)

})

const handleCurrentChange = (val) => {
    this.currentRow = val
}
</script>

<template>
    <div>
        <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange"
            :header-cell-style="{ background: '#f4f6f8', color: '#000000' }">

            <el-table-column type="index" width="70" label="序号">
            </el-table-column>
            <el-table-column property="ruleNumber" :label="listTop[0]">
            </el-table-column>
            <el-table-column property="ruleName" :label="listTop[1]">
            </el-table-column>
            <el-table-column property="freeDuration" :label="listTop[2]">
            </el-table-column>
            <el-table-column property="chargeCeiling" :label="listTop[3]">
            </el-table-column>
            <el-table-column property="ruleName" :label="listTop[4]">
            </el-table-column>
            <el-table-column property="ruleNameView" :label="listTop[5]">
            </el-table-column>
            <el-table-column :label="listTop[6]">
                <el-button type="warning" plain>编辑</el-button>
                <el-button type="danger" plain>删除</el-button>
            </el-table-column>
        </el-table>

    </div>
</template>

使用

  <!-- 列表 -->
  <content-list @edit="edit" @del="del" :tableData="tableData" :listTop="listTop"></content-list>

    const listTop = ['名称', '数字', '面积(m²)', '费用(元/m²)', '状态', '操作']