wextendpack3
Advanced tools
## 重要版本更新说明 <details> <summary>展开查看</summary> 1.0.19 ------- 支持响应表单项attrs配置动态变化， 例如select组件选项的动态变化;
1.0.19 ------- 支持响应表单项attrs配置动态变化， 例如select组件选项的动态变化;
1.0.21 ------- 表单项代码优化；帮助手册更新；
1.0.24 ------- 表格组件序号列、操作列代码优化
1.0.26 ------- 表单组件change事件多次触发问题处理；增加emit-change事件和原change事件返回参数格式不同，具体看下方文档；
1.0.28 ------- 表格组件配置优化；表格组件内封装分页组件页面重置处理；
1.0.32 ------- 表单组件v-model:defaultVal值没有响应更新问题修复；
1.0.40 ------- 表单组件绑定rules问题修复；
1.0.46 ------- 表格事件绑定问题修复，使用方式参考下方表格事件例子；
封装了element plus table组件且自带分页；支持跨页多选（通过设置tableOption.attrs.multiSelectKey开启），通过select事件返回选择的行数据。
使用描述：来控制序号列是否显示， 也支持tableOption.showIndex, 只要一个为true即可显示序号列
值类型： Boolean
默认值： true
使用描述：序号列属性设置同Table-column属性，通过v-bind绑定给序号列，支持tableOption.indexColAttrs，并且tableOption.indexColAttrs优先级高于indexColAttrs
值类型： Object
默认值：
{
align: 'center',
width: 80,
label: '序号'
}
使用描述：来控制操作列是否显示， 也支持tableOption.showActions, 只要一个为true即可显示
值类型： Boolean
默认值： false
使用描述：分页组件属性，通过v-bind绑定给分页组件
使用描述：操作列属性设置同Table-column属性，通过v-bind绑定给序号列，支持tableOption.actionColAttrs，并且tableOption.actionColAttrs优先级高于actionColAttrs
值类型： Object
默认值：
{
fixed: 'right',
align: 'center',
minWidth: 250,
label: '操作'
}
使用描述：来控制字段名和别名的key
值类型：Object
默认值：{ label: 'label', name: 'name' }
描述：表格配置
值类型：Object
{
showActions: false,
// 判断是否显示'操作'列, 操作列插槽名称为actions
showPage: true, // 用于判断是否是否使用g-table中封装的pagination组件，默认为true
// totalCount：0, // 即将弃用， pageAttrs中设置。记录数据总数，totalCount大于选择的pagezie时显示分页组件
// pagesizes: [], // 即将弃用， pageAttrs中设置。 分页显示数据量设置，默认[10, 20, 30, 40]
// pagesize: 0, // 即将弃用， pageAttrs中设置。 每页数据量，默认为10
pageAttrs: {
// 分页组件的配置属性
total: 0,
pagesizes: [10, 20, 30, 40, 50],
pagesize: 10
},
// 事件绑定
listeners: {
'current-change': (row) => {
}
},
// 这里的属性会通过v-bind绑定到v-table上
attrs: {
'highlight-current-row': true, // el-table原始属性，用于开启行选中并可触发current-change事件
multiSelectKey: 'id' // 扩展属性，支持跨页多选
},
// 字段配置（关键属性），配置在下方单独进行说明
columns: []
}
描述：表格数据
值类型：数组
tableOption.columns = [
{
label: '编号',
name: 'bh',
hidden: true， // 用于设置字段是否显示
// 通过v-bind将attrs中的属性赋值给el-table-column
attrs: {
align: 'left'
},
slot: 'chacao' // 支持插槽，名字和name可以不同，具体使用情况下方使用样例（2）
// 支持属性值颜色设置, 通过getColor函数改变属性值span标签字体的颜色
getColor: (val) => {
let options = {
a: '#dc1111',
b: '#0ecb7f'
}
return options[val] || ''
}
}
}
]
(1) label
用于表格显示字段别名
(2) name
字段英文名
（3）hidden 用于设置字段是否显示, 例如编号、id等这些字段是数据删除的时候需要用到，但是可以不显示
(1) page-change
切换分页、切换pagesize的时候出发
（2）select
选择数据后触发
（1）基本使用
<g-table :tableOption="tableOptions" :tableData="tableData"></g-table>
显示操作列：
<g-table :tableOption="tableOptions" :tableData="tableList.data" @page-change="handlePage($event)">
// scope为 { $index: xxx, row: xxx } $index是当前行索引，row是当前行数据
<template v-slot:actions="scope">
<el-button>test</el-button>
</template>
</g-table>
（2）插槽
// js
tableOption.columns = [
{
label: '插槽',
name: 'chacao',
attrs: {
align: 'left'
},
slot: 'chacao' // 名字和name可以不同
}
]
// html
<g-table :tableOption="tableOptions" :tableData="tableList.data">
<template v-slot:chacao="scope">
<span style="text-align: center;border: 1px solid #dddddd;">{{ scope.row['chacao'] }}</span>
</template>
</g-table>
（3）树形数据
// js
const tableOptions = reactive({
showActions: true,
// totalCount: 0, 即将弃用，改到pageAttrs.pagesize
// pagesizes: [10, 20, 30, 40, 50], 即将弃用，改到pageAttrs.pagesizes
// pagesize: 10, 即将弃用，改到pageAttrs.pagesize
pageAttrs: {
total: 0,
pagesizes: [10, 20, 30, 40, 50],
pagesize: 10
},
actionColAttrs: {
fixed: 'right',
align: 'center',
minWidth: 120,
label: '操作'
},
attrs: {
'row-key': 'bh',
'default-expand-all': true,
border: true
},
columns: [
{
label: '编号',
name: 'bh',
getColor: (val) => {
let options = {
a: '#dc1111',
b: '#0ecb7f'
}
return options[val] || ''
}
},
{
label: '插槽',
name: 'chacao',
attrs: {
align: 'left'
},
slot: 'chacao' // 名字和name可以不同
}
]
})
const tableList = reactive({
data: [
{
bh: 'a',
chacao: 'test',
children: [
{
bh: 'd',
chacao: '123'
},
{
bh: 'e',
chacao: '123'
}
]
},
{
bh: 'b',
chacao: 'test'
},
{
bh: 'c',
chacao: 'test'
}
]
})
<g-table ref="gTable" :tableOption="tableOptions" :tableData="tableList.data">
<template v-slot:chacao="scope">
<span style="text-align: center;border: 1px solid #dddddd;">{{ scope.row['chacao'] }}</span>
</template>
</g-table>
效果如下：
（4）表格重置后分页组件页面设置问题
<g-table ref="gTable" :tableOption="tableOptions" :tableData="tableList.data" :show-index="false">
....
</g-table>
<script>
import { ref } from 'vue'
export default {
setup() {
const gTable = ref(null)
// reset table and pagination
function handleResetTb() {
gTable.value.resetPagination()
}
}
}
</script>
基于饿了么ui库form表单项组件进行封装
let formFields = {
bh: {
alias: '', // 字段别名
component: { // 组件配置
type: 'input', // 默认type是input, 这个type是组件类型, 这个类型枚举看下方组件类型
hidden: true, // 隐藏不显示
attrs: { // 组件属性，通过v-bind和$attrs作用于子组件，这里的属性主要参考element plus的组件属性
'input-align': 'right'
}
}
},
status: {
alias: '状态',
component: {
slot: 'status' // 支持插槽
}
},
// 支持枚举
sfcjjs: {
alias: '是否曾经积水',
type: 'string',
component: {
type: 'select', // 默认
attrs: {
values: [
{
label: '是',
value: '是'
},
{
label: '否',
value: '否'
}
]
}
}
},
jcssmc: {
alias: '监测设施名称',
type: 'string',
component: {
type: 'input', // 默认
attrs: {
'input-align': 'right'
},
expression: {
render: (form) => {
if (form.sfyjcss && form.sfyjcss === '是') {
return true
} else {
return false
}
}
}
}
}
}
以下类型是经过二次封装后的组件，element plus原生组件也是支持的，只要component.type直接填element plus组件名称el-xxx即可
input ---对应element plus组件---- el-input
input-number -------------------------- el-input-number
switch -------------------------- el-switch
date -------------------------- el-date-picker
select -------------------------- el-select
uploader ----非element plus组件，但是依赖于element----- g-file-uploader
<el-form ref="submitForm" :model="properties" label-width="150px" class="form-no-line-height">
<el-row :gutter="32">
<el-col v-for="(value, key) in usefulFields" :key="key" :span="value.component.attrs && (value.component.attrs.type === 'textarea' || value.component.type === 'uploader') ? 24 : 8">
<template v-if="value.component.type === 'uploader'">
<el-form-item :label="value.alias" v-bind="value.component.attrs || {}">
<g-file-uploader ref="attchmentPanel" :attachmentData="getAttachmentDataConfigByFiledName(key)" @selectFiles="handleSelectFiles" @delete="handleDelFile"></g-file-uploader>
</el-form-item>
</template>
<template v-else>
<!--vue2.x写法<g-form-item :key="key" :label="value.alias" :class="value.alias.length < 10 ? 'short-form-item-name' : ''" :fieldKey="key" :defaultVal.sync="properties[key]" :formItem="value.component" @emit-change="formItemValChangeHandle"></g-form-item>-->
<g-form-item :key="key" :label="value.alias" :class="value.alias.length < 10 ? 'short-form-item-name' : ''" :prop="key" v-model:defaultVal="properties[key]" :formItem="value.component" @emit-change="formItemValChangeHandle"></g-form-item>
</template>
</el-col>
</el-row>
</el-form>
el-form还是需要设置:model="xxx"不然g-form-item响应有问题
事件包括element plus组件支持的事件和二次封装后的事件。
（1）emit-change
上述二次封装后的组件，支持emit-change事件, input组件是变更时立刻触发，input-number是失去焦点时触发，返回参数为绑定对象修改后的键值对;
(2) 原来的change事件存在冒泡问题，因此需要进行如下处理
<g-form-item :key="key" :label="value.alias" :class="value.alias.length < 10 ? 'short-form-item-name' : ''" :prop="key"
v-model:defaultVal="properties[key]" :formItem="value.component" @emit-change="formItemValChangeHandle" @change="formItemValChangeHandle2"></g-form-item>
function formItemValChangeHandle(data, oldVal) {
// 会返回新旧数据，并且都是键值对形式: { key: 同g-form-item中prop绑定的key, value: xxx }
}
function formItemValChangeHandle2(data, oldVal) {
// 同element plus返回数据
}
FAQs
## 重要版本更新说明 <details> <summary>展开查看</summary> 1.0.19 ------- 支持响应表单项attrs配置动态变化， 例如select组件选项的动态变化;
The npm package wextendpack3 receives a total of 1 weekly downloads. As such, wextendpack3 popularity was classified as not popular.
We found that wextendpack3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.