qz-custom-table
v1.0.3
Published
基于vue3+elTable二次封装
Downloads
8
Readme
基于Vue3.x + ElementPlus组件二次封装
1.el-table的二次封装
使用示例:
<script setup>
import { QZCustomTable } from 'qz-custom-table';
import 'qz-custom-table/style.css';
const refCustomTable = ref(null);
const tableData = ref([
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}
]);
const tableColumns = [
{
type: 'selection'
},
{
type: 'index',
lebel: '序号',
width: '100'
},
{
prop: 'date',
label: '日期',
align: 'center',
width: '160'
},
{
prop: 'name',
label: '名称',
align: 'center',
width: '160'
},
{
prop: 'address',
label: '地址',
align: 'center',
width: '320'
}
];
</script>
<template>
<QZCustomTable ref="refCustomTable" class="w-full" :data="tableData" :columns="tableColumns" />
</template>