自研vue3+elementplus 组件库

wangchao
155 阅读2分钟

vue3+elementplus 组件库

项目源码地址： gitee.com/wangchaoand…

如何运行

参考地址：git-scm.com/book/zh/v2/…

  1. 如果项目中有子模块了: git submodule init
  2. 拉取到本地子模块： git submodule add gitlab.babec.com/baec-cli/vu…

配合技术

  • vite 插件
  • vue3+elementplus

MyTable 组件使用规则

import MyTable from '@v3c/MyTable';

  1. 基本使用
<MyTable :option="tableOption" ref="myTableRef"></MyTable>
<script setup>
  const tableOption = ref({
    columns: [
      { property: 'carNumber', label: '车牌号' },
      { property: 'driverName', label: '驾驶员姓名' },
      { property: 'workBegin', label: '排班开始时间' },
      { property: 'workEnd', label: '排班结束时间' },
    ],
  })
</script>
  1. 常用配置

2.1 组件配置选项

参数说明子项说明类型可选值默认值描述
isSelection首列是否显示多选框——booleantruefalse——
isBorder是否显示边框——booleantruefalse——
hlcr当前选中行是否高亮——booleantruefalse——
isIndex是否显示序号列——booleantruefalse——
columns表格列字段配置——array——[]必选，每列必须配置 property 和 label 属性
property列数据字段string————必选
label列名称string————必选
width列宽度number/stringnumber / number + "px""auto"可选，"auto" 或 数字或数字+"px"
type列类型string"opt"———可选，当 type 为"opt",模板中可以定义一个或多个插槽，插槽名格式为：#opt-${property}
tipType溢出文本提示框类型string"toolTip"/"windowFixed"""tipType 为 toolTip 时，使用的是 el-popover 自带提示框，tipType 为"windowFixed"时，使用的是自定义的提示窗
request接口配置——object————可选，当配置 request 字段时，必须配置 api 和 apiUrl 属性
api请求公共部分配置object————必选，统一封装 request 请求
apiUrl接口地址string必选
apiMethod请求方式string"POST"/"GET""GET"可选
apiData请求参数object——{}请求接口所需参数
postObj数据和总条数字段object——{ data: "data", total: "total" }指定组件使用接口返回的数据和总条数字段
pagination分页组件配置——object————可选，配置此项表示表格带分页
footerStyle分页组件样式object可选，控制分页组件外层样式
pageSize每页条数number——5可选
numName请求接口页数字段string——"pageNum"自定义请求接口对应的页数字段
sizeName请求接口每页条数字段string——"pageSize"自定义请求接口对应的每页条数字段
layout分页子组件string"total,prev,pager,next,jumper""total,prev,pager,next,jumper"一般可以只配置 "prev,pager,next"

2.2 基础项样式配置

<MyTable :option="tableOption" ref="myTableRef"></MyTable>
<script setup>
  const tableOption = ref({
    isSelection: true,
    isBorder: true,
    hlcr: true,
    isIndex: true,
    columns: [
      {
        { property: 'carNumber', label: '车牌号' },
        { property: 'driverName', label: '驾驶员姓名'},
        { property: 'workBegin', label: '排班开始时间'},
        { property: 'workEnd', label: '排班结束时间' }
      }
    ]
  })
</script>

2.3 表格列字段配置(columns)

<MyTable :option="tableOption" ref="myTableRef"></MyTable>
<script setup>
  const tableOption = ref({
    isSelection: true,
    isBorder: true,
    hlcr: true,
    isIndex: true,
    columns: [
      { property: 'carNumber', label: '车牌号', width: 100 },
      { property: 'driverName', label: '驾驶员姓名', width: 200 },
      { property: 'workBegin', label: '排班开始时间', width: '100px' },
      { property: 'workEnd', label: '排班结束时间', width: 'auto' },
    ],
  })
</script>

2.3 接口配置(request)

<MyTable :option="tableOption" ref="myTableRef"></MyTable>
<script setup>
  import request from '@/utils/request'
  const tableOption = ref({
    isSelection: true,
    isBorder: true,
    hlcr: true,
    isIndex: true,
    columns: [
      { property: 'carNumber', label: '车牌号', width: 100 },
      { property: 'driverName', label: '驾驶员姓名', width: 200 },
      { property: 'workBegin', label: '排班开始时间', width: 100 },
      { property: 'workEnd', label: '排班结束时间', width: 100 },
    ],
    request: {
      api: request,
      apiUrl: '/web/v2.2/workSchedule/page',
      apiMethod: 'POST', // 可选
    },
  })
</script>

2.4 分页参数配置(pagination)

<MyTable :option="tableOption" ref="myTableRef"></MyTable>
<script setup>
  import request from '@/utils/request'
  const tableOption = ref({
    isSelection: true,
    isBorder: true,
    hlcr: true,
    isIndex: true,
    columns: [
      { property: 'carNumber', label: '车牌号', width: 100 },
      { property: 'driverName', label: '驾驶员姓名', width: 200 },
      { property: 'workBegin', label: '排班开始时间', width: 100 },
      { property: 'workEnd', label: '排班结束时间', width: 100 },
    ],
    request: {
      api: request,
      apiUrl: '/web/v2.2/workSchedule/page',
      apiMethod: 'POST',
    },
    pagination: {
      pageSize: 10,
    },
  })
</script>
  1. 高级用法

3.1 表格列字段配置(columns)

<MyTable :option="tableOption" ref="myTableRef">
  <template #opt-check="{ scope }">
    <el-button type="danger">查看</el-button>
  </template>
   <template #opt-reset="{ scope }">
    <el-button type="danger">删除</el-button>
  </template>
</MyTable>
<script setup>
  import request from '@/utils/request'
  const tableOption = ref({
    isSelection: true,
    isBorder: true,
    hlcr: true,
    isIndex: true,
    columns: [
      { property: 'carNumber', label: '车牌号', width: 100 },
      { property: 'driverName', label: '驾驶员姓名', width: 200, tipType: 'toolTip' },
      { property: 'workBegin', label: '排班开始时间', width: '100px', tipType: 'windowFixed' },
      { property: 'workEnd', label: '排班结束时间', width: 'auto' },
      { property: 'check', label: '查看', type: 'opt' },
      { property: 'reset', label: '重置', type: 'opt' },
    ],
  })
</script>

3.2 接口配置(request)

<MyTable :option="tableOption" ref="myTableRef"></MyTable>
<script setup>
  const tableOption = ref({
    isSelection: true,
    isBorder: true,
    hlcr: true,
    isIndex: true,
    columns: [
      { property: 'carNumber', label: '车牌号', width: 100 },
      { property: 'driverName', label: '驾驶员姓名', width: 200 },
      { property: 'workBegin', label: '排班开始时间', width: 100 },
      { property: 'workEnd', label: '排班结束时间', width: 100 },
    ],
    request: {
      api: request,
      apiUrl: '/web/v2.2/workSchedule/page',
      apiMethod: 'POST',
      postObj: { data: 'data.rows', total: 'data.total' },
    },
  })
</script>

3.3 分页参数配置(pagination)

<MyTable :option="tableOption" ref="myTableRef"></MyTable>
<script setup>
  const tableOption = ref({
    isSelection: true,
    isBorder: true,
    hlcr: true,
    isIndex: true,
    columns: [
      { property: 'carNumber', label: '车牌号', width: 100 },
      { property: 'driverName', label: '驾驶员姓名', width: 200 },
      { property: 'workBegin', label: '排班开始时间', width: 100 },
      { property: 'workEnd', label: '排班结束时间', width: 100 },
    ],
    request: {
      api: request,
      apiUrl: '/web/v2.2/workSchedule/page',
      apiMethod: 'POST',
      postObj: { data: 'data.rows', total: 'data.total' },
    },
    pagination: {
      footerStyle: {
        margin: '10px 0',
        float: 'right',
      },
      pageSize: 10,
      numName: 'pageNum', // 可选
      sizeName: 'pageSize', // 可选
      layout: 'total,prev, pager, next, jumper',
    },
  })
</script>
  1. 较完整的例子
<MyTable :option="tableOption" ref="myTableRef">
  <template #opt-check="{ scope }">
    <el-button type="danger" @click="checkDriver(scope)">查看</el-button>
  </template>
  <template #opt-reset="{ scope }">
    <el-button type="danger" @click="resetDriver(scope)">重置</el-button>
  </template>
</MyTable>
<script setup>
  import request from '@/utils/request'
  const tableOption = ref({
    isSelection: true,
    isBorder: true,
    hlcr: true,
    isIndex: true,
    columns: [
      { property: 'carNumber', label: '车牌号', width: 100 },
      { property: 'driverName', label: '驾驶员姓名', width: 200, tipType: 'windowFixed' },
      { property: 'workBegin', label: '排班开始时间', width: '100px' },
      { property: 'workEnd', label: '排班结束时间', width: 'auto' },
      { property: 'opt', label: '操作', type: 'opt' },
    ],
    request: {
      api: request,
      apiUrl: '/web/v2.2/workSchedule/page',
      apiMethod: 'POST',
      apiData,
      postObj: { data: 'data.rows', total: 'data.total' },
    },
    pagination: {
      footerStyle: {
        margin: '10px 0',
        float: 'right',
      },
      pageSize: 10,
      numName: 'pageNum', // 可选
      sizeName: 'pageSize', // 可选
    },
  })
  function checkDriver(scope) {
    console.log(scope)
  }
  function resetDriver(scope) {
    console.log(scope)
  }
</script>

MyForm 组件使用规则

import MyForm from '@v3c/MyForm';
avatar
文章
阅读
粉丝