# mytable-ui

> 自定义的简易的table组件

Latest version **1.0.3** (published 2023-04-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install mytable-ui
pnpm add mytable-ui
yarn add mytable-ui
bun add mytable-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-04-26 |
| First published | 2023-04-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zzlyc |
| Maintainers | liuyachao |
| Keywords | my-table, vue |

## Links

- npm: https://www.npmjs.com/package/mytable-ui
- npm.io page: https://npm.io/package/mytable-ui

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2023-04-26
- 1.0.2 — 2023-04-26
- 1.0.1 — 2023-04-26
- 1.0.0 — 2023-04-26

## README

## 安装：

```
npm i mytable-ui
```

## 使用：

```javascript
// 在vue3 项目的 main.js 文件中安装组件

import MyTableUI from 'mytable-ui'
const app = createApp(App)
app.use(MyTableUI)
```

## 示例：

```vue
<script setup>
	import { reactive, ref } from 'vue'

	const tableData = reactive([
		{ id: 1, name: '张三', age: 20 },
		{ id: 2, name: '亚瑟', age: 20 },
		{ id: 2, name: '孙猴', age: 22 },
		{ id: 3, name: '兰陵王', age: 21 },
		{ id: 4, name: '孙尚香', age: 18 },
	])

	const btnClick = (data) => {
		console.log('操作，被点击了', data.name)
	}
	const btnClick22 = (data) => {
		console.log('操作，被点击了22', data.age)
	}
</script>

<template>
	<div>
		<p>HELLO My-table</p>

		<my-table :tableData="tableData">
			<my-col prop="id" label="ID"></my-col>
			<my-col prop="name" label="姓名"></my-col>
			<my-col prop="age" label="年龄"></my-col>
			<my-col label="操作">
				<template v-slot="scope">
					<button @click="btnClick(scope)">操作姓名</button>
					<button @click="btnClick22(scope)">操作年龄</button>
				</template>
			</my-col>
		</my-table>
	</div>
</template>

<style lang="scss" scoped></style>
```

---
_Source: https://npm.io/package/mytable-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._