全局注册自定义组件

传统注册组件

1、在 src/components 下自定义公用组件

<template>
  <el-pagination
    :current-page="currentPage"
    :page-sizes="pageSizesComputed"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handlePageSizeChange"
    @current-change="handleCurrentPageChange"
  />
</template>
<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true,
      default: 1
    },
    pageSize: {
      type: Number,
      required: true
    },
    pageSizes: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {

    }
  },
  computed: {
    pageSizesComputed: function() {
      console.log(this.pageSizes, this.pageSizes.length)
      if (this.pageSizes.length) {
        return this.pageSizes
      } else {
        return [5, 10, 20, 50]
      }
    }
  },
  methods: {
    handlePageSizeChange(val) {
      this.$emit('handlePageSizeChange', val)
    },
    handleCurrentPageChange(val) {
      this.$emit('handleCurrentPageChange', val)
    }
  }
}
</script>
Pagination/index.vue

2、在当前组件中引用自定义公用组件

<template>
  <div class="dashboard-container">
    <el-card>
      <el-table
        v-loading="loading"
        :data="userList"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="120"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="150"
        />
        <el-table-column
          prop="mobile"
          label="手机号"
          width="180"
        />
        <el-table-column
          prop="workNumber"
          label="工号"
          width="120"
        />
        <el-table-column
          fixed="right"
          label="操作"
          min-width="280"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 使用自定义组件 -->
      <pagination
        :current-page="params.page"
        :page-size="params.size"
        :page-sizes="pageSizes"
        :total="total"
        @handlePageSizeChange="handlePageSizeChange"
        @handleCurrentPageChange="handleCurrentPageChange"
      />
    </el-card>

  </div>
</template>


<script>
import Pagination from '@/components/Pagination'    // 导入自定义组件
import { getUserList } from '@/api/employees'

export default {
  name: 'Dashboard',
  // 注册组件
  components: {
    Pagination 
  },
  data() {
    return {
      userList: [],
      pageSizes: [10, 20, 30, 30],
      params: {
        page: 1,
        size: 10
      },
      loading: false,
      total: 0
    }
  },
  computed: {

  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      this.loading = true
      const result = await getUserList(this.params)
      this.userList = result.rows
      this.total = result.total
      this.loading = false
    },
    handlePageSizeChange(val) {
      this.params.size = val
      this.params.page = 1
      this.getUser()
    },
    handleCurrentPageChange(val) {
      this.params.page = val
      this.getUser()
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-table {
    margin-top: 50px !important;
  }
</style>

 

统一注册自定义组件

1、在 src/components 下自定义公用组件

<template>
  <el-pagination
    :current-page="currentPage"
    :page-sizes="pageSizesComputed"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handlePageSizeChange"
    @current-change="handleCurrentPageChange"
  />
</template>
<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true,
      default: 1
    },
    pageSize: {
      type: Number,
      required: true
    },
    pageSizes: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {

    }
  },
  computed: {
    pageSizesComputed: function() {
      console.log(this.pageSizes, this.pageSizes.length)
      if (this.pageSizes.length) {
        return this.pageSizes
      } else {
        return [5, 10, 20, 50]
      }
    }
  },
  methods: {
    handlePageSizeChange(val) {
      this.$emit('handlePageSizeChange', val)
    },
    handleCurrentPageChange(val) {
      this.$emit('handleCurrentPageChange', val)
    }
  }
}
</script>
Pagination/index.vue
<template>
  <div class="page-tools">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col v-if="showBefore">
        <div>
          <i class="el-icon-info" />
          <slot name="before" />
        </div>

      </el-col>
      <el-col>
        <el-row class="after" type="flex" justify="end">
          <el-col>
            <slot name="after" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  props: {
    showBefore: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang="scss">
.page-tools{
    margin: 20px 0;
    i {
        margin-right: 5px;
        color: #409eff;
    }
    .after {
        position: absolute;
        right: 0;
        transform: translateY(-50%);
    }
}
</style>
PageTools/index.vue

 

2、新建 components/index.js

// 该文件负责所有的公共的组件的全局注册   Vue.use
import PageTools from './PageTools'
import Pagination from './Pagination'
export default {
  install(Vue) {
    //  注册全局的通用栏组件对象
    Vue.component('PageTools', PageTools)
    Vue.component('Pagination', Pagination)
  }
}

 

 

3、在 main.js 统一注册组件

import Component from '@/components'
Vue.use(Component) // 注册自己的插件

4、在组件中使用自定义组件

<template>
  <div class="dashboard-container">
    <el-card>
      <page-tools>
        <template slot="before">
          我来啦
        </template>
        <template v-slot:after>
          <el-button size="small" type="primary">导入</el-button>
          <el-button size="small" type="primary">导出</el-button>
        </template>
      </page-tools>
      <el-table
        v-loading="loading"
        :data="userList"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="120"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="150"
        />
        <el-table-column
          prop="mobile"
          label="手机号"
          width="180"
        />
        <el-table-column
          prop="workNumber"
          label="工号"
          width="120"
        />
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          width="120"
        />
        <el-table-column
          prop="departmentName"
          label="部门"
          width="200"
        />
        <el-table-column
          prop="timeOfEntry"
          label="入职时间"
          width="120"
        >
          <template slot-scope="row">
            {{ row.row.timeOfEntry | dateTimeFormat }}
          </template>
        </el-table-column>

        <el-table-column
          prop="enableState"
          label="是否在职"
          width="120"
        />
        <el-table-column
          prop="enableState"
          label="状态"
          width="120"
        />
        <el-table-column
          fixed="right"
          label="操作"
          min-width="280"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small">离职角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :current-page="params.page"
        :page-size="params.size"
        :page-sizes="pageSizes"
        :total="total"
        @handlePageSizeChange="handlePageSizeChange"
        @handleCurrentPageChange="handleCurrentPageChange"
      />
    </el-card>

  </div>
</template>

<script>
import { getUserList } from '@/api/employees'

export default {
  name: 'Dashboard',
  data() {
    return {
      userList: [],
      pageSizes: [10, 20, 30, 30],
      params: {
        page: 1,
        size: 10
      },
      loading: false,
      total: 0
    }
  },
  computed: {

  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      this.loading = true
      const result = await getUserList(this.params)
      this.userList = result.rows
      this.total = result.total
      this.loading = false
    },
    handlePageSizeChange(val) {
      this.params.size = val
      this.params.page = 1
      this.getUser()
    },
    handleCurrentPageChange(val) {
      this.params.page = val
      this.getUser()
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-table {
    margin-top: 50px !important;
  }
</style>

 

posted @ 2022-03-18 14:47  DeyouKong  阅读(277)  评论(0)    收藏  举报