# yl-custon-components

**Repository Path**: npm_yolo/yl-custon-components

## Basic Information

- **Project Name**: yl-custon-components
- **Description**: npm的自定义组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-22
- **Last Updated**: 2024-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 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: [],
}
```