@qingbing/ts-v3-operate-button
v2.0.6
Published
以 vue3 + element-plus 为基础封装的列表操作组件, 主要用作 table 的操作按钮组
Downloads
27
Maintainers
qingbingReadme
OperateButton 插件介绍
1. 概要说明
1.1 地址
https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-operate-button
1.2 插件描述
以 vue3 + element-plus 为基础封装的列表操作组件, 主要用作 table 的操作按钮组
1.3 重要依赖
- @qingbing/ts-v3-utils: ^1.0.1
- @qingbing/ts-v3-element-plus: ^2.1.4
- element-plus: ^2.6.3
- vue: ^3.4.21
1.4 插件安装
# yarn 安装
yarn add @qingbing/ts-v3-operate-button
# npm 安装
npm i @qingbing/ts-v3-operate-button2. 包说明
2.1 属性说明
| 属性名 | 类型 | 是否必需 | 默认值 | 意义 | | :---------------- | :------- | :------- | :----------------------------------------------- | :----------------------------------- | | row | Object | 是 | - | 传递的行数据 | | buttons | Array | 否 | [] | 按钮组 | | isButton | Boolean | 否 | false | 是否采用按钮形式, 默认使用 link 形式 | | hide | Function | 否 | - | 计算按钮是否隐藏函数 | | confirmText | String | 否 | '数据一旦删除将无法恢复，确认要执行删除操作么？' | 删除时确认提示信息 | | confirmTitle | String | 否 | '操作提示' | 删除时确认提示标题 | | confirmButtonText | String | 否 | '确定' | 删除时"确认"按钮提示 | | cancelButtonText | String | 否 | '取消' | 删除时"取消"按钮提示 | | successTip | String | 否 | '操作成功 ^^' | 操作成功提示信息 | | failureTip | String | 否 | '操作失败 $$' | 操作失败提示信息 |
2.2 事件说明
| 事件名 | 类型 | 意义 | | :----- | :--- | :--- | | - | 无 | - |
2.3 实例暴露说明
| 属性名 | 类型 | | :----- | :--- | | - | 无 |
3. 示例
3.1 全局注册使用
- 一旦注册，
OperateButton作为组件全局通用 - 使用方法参考 3.2 模板组件使用, 去掉组件导入的语句即可
// main.ts
import { OperateButtonPlugin } from '@qingbing/ts-v3-operate-button'
app.use(OperateButtonPlugin, {
name: 'OperateButton',
options: {}
})3.2 模板组件使用
<template>
<el-divider>
<el-button @click="handelSwitchButtonState" type="danger">切换按钮显示状态</el-button>
</el-divider>
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="address" label="Address" width="600" />
<el-table-column fixed="right" label="Operations">
<template #default="scope">
<OperateButton :row="scope.row" :buttons="buttons" :hide="handleHide" :is-button="isButton" />
</template>
</el-table-column>
</el-table>
<el-dialog v-model="dialogVisible" :title="dialogTip" width="500">
<p>{{ operateRow }}</p>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import type { TOperateButtonButton, TStringCall } from '@qingbing/ts-v3-operate-button';
import type { TObject, TRecord } from "@qingbing/ts-v3-utils";
import type { Ref } from "vue";
import { OperateButton } from '@qingbing/ts-v3-operate-button' // 如果注册成了全局组件，这句将不再需要
import { ref } from "vue";
// 测试 dialog 信息控制
const dialogVisible = ref(false)
const dialogTip = ref("")
const operateRow: Ref<TRecord> = ref({})
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
is_hide: 1
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
is_hide: 0
}
]
let _isSuccess = true
const buttons: TOperateButtonButton[] = [
{
type: 'view',
handle: (row: TRecord) => {
dialogTip.value = "详情面板"
dialogVisible.value = true
operateRow.value = row
}
}, {
type: 'edit',
handle: (row: TRecord) => {
dialogTip.value = "编辑面板"
dialogVisible.value = true
operateRow.value = row
}
},
{
type: 'delete',
handle: (row: TRecord, successCall: TStringCall, failureCall: TStringCall) => {
// ...
// done, 成功还是失败
_isSuccess ? successCall() : failureCall()
_isSuccess = !_isSuccess
}
}, {
label: "查看子项目",
linkType: "success",
params: {
hide: true
},
handle: (row: TRecord) => {
dialogTip.value = "子项目面板"
dialogVisible.value = true
operateRow.value = row
}
}
]
// 计算操作按钮是否显示
const handleHide = (row: TRecord, params: TObject) => {
return params.hide && !!row.is_hide
}
const isButton = ref(false)
const handelSwitchButtonState = () => {
isButton.value = !isButton.value
}
</script>