hr-frame

hr-frame--基于Vue3二次封装ElementPlus的一款框架

Installation

• npm

  npm install hr-frame -S
  

• yarn

  yarn add hr-frame -S
  

Usage

HrDate

介绍

基于ElementPlus得ElDatePicker组件进行了二次封装，完善了绑定值格式问题

API

参数	说明	类型
v-model	双向绑定	String| Date
value-format	双向绑定值得时间格式	String

Events

事件名称	说明	回调参数
date-change	绑定日期发生改变时触发	组件绑定值

Usage

  <hr-date-picker
                v-model="curDate"
                type="date"
                value-format="YYYY-MM"
                @dateChange="dateChange"></hr-date-picker>

参考资料

el-date-picker

dayjs

HrTable

介绍

基于ElementPlus的ElTable组件进行的二次封装,将表格组件和分页组件整合在了一起，同时支持表格拖拽功能

API

参数	说明	类型	默认值
table-data	绑定的表格数据	Array	[]
table-column	表头数据，格式同el-table-column参数	Array	[]
row-key	每一行的key值	String	id
draggable	是否开启拖拽(注：开启拖拽需要先指定row-key)	Boolean	false
pagination	是否展示分页	Boolean	true
total	分页总数	Number	0

Events

事件名	说明	回调参数
rowDblclick	双击事件	row
selection-change	当选择项发生变化时会触发该事件	选中的行数据
dragEnd	拖拽结束时触发的事件	排序后的表格数据
current-change	分页改变时触发的事件	currentRow

Usage

 <hr-table
          :table-data="tableData"
          :tableColumns="tableColumns"
          draggable
          @selection-change="selectionChange"
          @rowDblclick="rowDblClick"></hr-table>
  tableColumns: [
          {label: "日期", prop: "date"},
          {label: "姓名", prop: "name"},
          {label: "地址", prop: "address"},
        ],
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎3',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎4',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]

参考资料

el-table

sortablejs