yl-custon-components v4.1.0

vite+vue3发布npm包

使用vite初始化项目

pnpm create vite 输入包名称 选择vue 选择ts cd 到项目目录中 pnpm install

注册组件

//引入公用组件库 import 'yl-custon-components/dist/style.css'; import { custonTable } from 'yl-custon-components/index.js'; //初始化组件 app.component('CustonTable', custonTable);

使用组件

 <CustomTable
    ref="comTableRef"
    :data="state.tableData.data"
    :header="state.tableHeader"
    :pageTotal="state.tableData.total"
    @loadData="getTableData"
>
    <!-- 工具栏自定义插槽 -->
    <template v-slot:tool>
    <el-button size="default" type="primary">查询</el-button>
    <el-button size="default" type="primary">添加</el-button>
    </template>
    <!-- 列自定义 -->
    <template #tableuserNickname="scope">
    用户昵称：{{ scope.row.userNickname }}
    </template>
    <!-- 列操作栏自定义 -->
    <template v-slot:table>
    <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
        <el-button size="small" link type="primary">
            <el-icon class="mr5">
            <ele-EditPen />
            </el-icon>
            编辑
        </el-button>
        <el-button size="small" link type="danger">
            <el-icon class="mr5">
            <ele-Delete />
            </el-icon>
            删除
        </el-button>
        </template>
    </el-table-column>
    </template>
</CustomTable>

tableHeader:{
    key: "systemUser",
    data: [],
}