SWElement

省外技术支持部通用组件收集。

安装&使用

安装

yarn add sw-element

使用

import SWElement from 'sw-element';

Vue.use(SWElement);

设置全局配置

import { sw_setGlobalConfig, SWBasicTableValues } from 'sw-element';

sw_setGlobalConfig({
  // 此处全局配置筛选表单的属性
  filterFormConfig: {
    // titleMarginLeft: 5,
    // titleMarginRight: 5,
    // titleFontSize: 14,
    // titleTextColor: '#424242',
    // itemWidth: 200
  },
  // 此处全局配置基础表格列宽自适应方式
  basicTableConfig: {
    // columnAdaptiveType: SWBasicTableValues.columnAdaptiveType.titleAdaptive
  },
  // 此处全局配置基础表格的属性
  basicTableAttributes: {
    // 请参考：https://element.eleme.io/#/zh-CN/component/table#table-attributes
    // ...
  },
  // 此处全局配置基础表格列的属性
  basicTableColumnAttributes: {
    // 请参考：https://element.eleme.io/#/zh-CN/component/table#table-column-attributes
    // 'show-overflow-tooltip': true, // 内置当内容过长被隐藏时显示tooltip，如需自行配置请在此处进行覆盖
    // ...
  },
  // 此处全局配置基础对话框的配置
  basicDialogConfig: {
    // center: true,
    // reverseBtn: false
    // cancelBtnTitle: '取消',
    // confirmBtnTitle: '确认',
    // cancelBtnVisible: true,
    // confirmBtnVisible: true,
  },
  // 此处全局配置基础对话框的属性
  basicDialogAttributes: {
    // 'modal-append-to-body': false,
    // 'destroy-on-close': true,
    // 'close-on-click-modal': false
  },
  // 此处全局配置数据表单的配置
  dataFormConfig: {
    // dynamicListIsOpen: false,
    // numberOfColumn: 2
  },
  // 此处全局配置数据表单的属性
  dataFormAttributes: {
    // 请参考：https://element.eleme.io/#/zh-CN/component/form#form-attributes
    // ...
  }
});

配置优先级：标签属性 > 全局属性 > 默认属性；

组件清单

FilterForm

筛选表单，通过配置快速生成筛选菜单。

使用示例

template

<sw-filter-form :items="filterItems" :initial-form-data.sync="filterData">
  <template v-slot:slot-demo>
    <el-input v-model="filterData.slotValue" />
  </template>
</sw-filter-form>

import { SWFilterFormValues } from 'sw-element';

export default {
  name: 'Index',
  data() {
    return {
      filterItems: [
        {
          visible: false,
          type: SWFilterFormValues.itemType.input,
          title: '输入框示例',
          prop: 'inputValue',
          contentSpan: 3,
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请输入'
          }
        },
        {
          type: SWFilterFormValues.itemType.selector,
          title: '选择器配置方法示例',
          prop: 'funSelectorValue',
          options: this.getOptions,
          labelKey: 'displayName',
          valueKey: 'id',
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.selector,
          title: '选择器配置值示例',
          prop: 'valSelectorValue',
          options: [
            {
              id: '1',
              displayName: '选项1'
            },
            {
              id: '2',
              displayName: '选项2'
            }
          ],
          labelKey: 'displayName',
          valueKey: 'id',
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.timePicker,
          title: '时间选择器',
          prop: 'timePickerValue',
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.timeSelector,
          title: '任意时间选择器',
          prop: 'timeSelectorValue',
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.datePicker,
          title: '日期选择器',
          prop: 'datePickerValue',
          contentSpan: 1,
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.slot,
          title: '插槽示例',
          contentSpan: 1,
          slotName: 'slot-demo'
        }
      ],
      filterData: {
        inputValue: '',
        funSelectorValue: '',
        valSelectorValue: '',
        datePickerValue: '',
        timePickerValue: '',
        timeSelectorValue: '',
        slotValue: ''
      }
    };
  },
  methods: {
    getOptions() {
      return [
        {
          id: '1',
          displayName: '选项1'
        },
        {
          id: '2',
          displayName: '选项2'
        }
      ];
    },
    onInput(val) {
      console.log(val);
    },
    onChange(val) {
      console.log(val);
    }
  }
};

属性

参数	说明	类型	是否必须
items	配置项	Array	是
initialFormData	数据模型	Object	是
config	筛选表单配置	Object	否

items[] Options

参数	说明	类型	是否必须	默认值
visible	当前项是否显示	Boolean	否	true
type	类型，请引用`SWFilterFormValues.itemType`中的枚举值	Array	是	-
title	标题	String	是	-
prop	属性名称	String	是	-
contentSpan	当前项占据的跨度，将自动计算为单元宽度的倍数	Number	否	1
options	选择器选项配置	Function/Array	否，当`type`为`selector`时必填	[]
labelKey	选择器显示文本对应数据源中的key	String	否，当`type`为`selector`时必填	-
valueKey	选择器选中值对应数据源中的key	String	否，当`type`为`selector`时必填	-
slotName	插槽名称	String	否，当`type`为`slot`时必填	-
on	各组件的事件扩展，请参考Element-UI组件库	Object	否	-
bind	各组件的属性扩展，请参考Element-UI组件库	Object	否	-

SWFilterFormValues.itemType

key	value	描述
input	input	输入框
selector	selector	选择器
datePicker	date-picker	日期选择器
timePicker	time-picker	任意时间选择器
timeSelector	time-selector	固定实现选择器
slot	slot	插槽，自定义筛选项

config Options

参数	说明	类型	默认值
titleMarginLeft	标题左边距	Number	5
titleMarginRight	标题右边距	Number	5
titleFontSize	标题字体大小	Number	14
titleTextColor	标题字体颜色	String	'#424242'
itemWidth	每一项的单元宽度	Number	200

BasicTable

基础表格组件，通过配置快速生成基础表格。

使用示例

template

<sw-basic-table ref="table" :items="tableColumnItems" :data="tableDataSource">
  <template #index="{row}">
    {{ row + 1 }}
  </template>
  <template #date="{data}">
    {{ data.date }}
  </template>
  <template #name="{data}">
    {{ data.name }}
  </template>
  <template #province="{data}">
    {{ data.province }}
  </template>
  <template #city="{data}">
    {{ data.city }}
  </template>
  <template #address="{data}">
    {{ data.address }}
  </template>
  <template #zip="{data}">
    {{ data.zip }}
  </template>
  <template #operate="{data}">
    {{ data.name }}
  </template>
  <template #custom-header="{column}">
    这是自定义表头的使用示例，第{{ column }}列
  </template>
  <template #expand="{data}">
    这是展开表格每一行的插槽使用示例，当前行的原始数据：{{ data }}
  </template>
  <template #append>
    这是append插槽的使用示例
  </template>
</sw-basic-table>

export default {
  name: 'Index',
  data() {
    return {
      tableColumnItems: [
        {
          bind: {
            type: 'expand'
          }
        },
        {
          bind: {
            type: 'selection'
          }
        },
        {
          title: '排序',
          slotName: 'index'
        },
        {
          title: '日期',
          slotName: 'date'
        },
        {
          title: '姓名',
          slotName: 'name'
        },
        {
          title: '省份',
          slotName: 'province'
        },
        {
          title: '市区',
          slotName: 'city'
        },
        {
          title: '地址',
          slotName: 'address'
        },
        {
          title: '邮编',
          slotName: 'zip'
        },
        {
          title: '操作',
          slotName: 'operate',
          headerSlotName: 'custom-header'
        }
      ],
      tableDataSource: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ]
    };
  },
  mounted() {
    this.$refs.table.toggleAllSelection();
  }
};

属性

参数	说明	类型	是否必须	默认值	描述
items	表格列的配置项	Array	是	-	-
config	配置	Object	否	-	-

其他扩展配置项请参考：https://element.eleme.io/#/zh-CN/component/table#table-attributes

items[] Options

参数	说明	类型	是否必须	默认值
title	当前列的标题	String	是	-
slotName	当前列的具名插槽名称	String	是	-
headerSlotName	当前列自定义表头的插槽名称	String	否	-
bind	列的扩展属性，请参考https://element.eleme.io/#/zh-CN/component/table#table-column-attributes	Object	否	-

config Options

参数	说明	类型	默认值
columnAdaptiveType	列的自适应类型，请引用`SWBasicTableValues.columnAdaptiveType`中的枚举值	String	设置该属性为`none`时，浏览器缩放时会导致标题换行，因此提供了根据标题自适应`title-adaptive`和最长标题自适应`longest-title-adaptive`两种方式，处理标题自动换行的问题。可根据表格实际展示内容自行调整自适应方式。如果需要自定义表头，请自行设置`min-width`属性进行覆盖。

SWBasicTableValues.columnAdaptiveType

key	value	描述
none	none	输入框
titleAdaptive	title-adaptive	标题自适应
longestTitleAdaptive	longest-title-adaptive	最长标题自适应

其他说明

内置append具名插槽，用于在表格末尾追加内容；
内置expand具名插槽，用于插入展开每一行的内容，需要指定当前行的bind.type为expand，并实现expand具名插槽。
TableMethods，请参考：https://element.eleme.io/#/zh-CN/component/table#table-methods

BasicDialog

基础对话框组件。

使用示例

template

<el-button @click="openDialog">打开对话框</el-button>
<sw-basic-dialog
  ref="dialog"
  :config="{
        center:isCenter
      }"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <span>对话框内容</span>
  <el-button @click="isCenter = !isCenter">切换</el-button>
</sw-basic-dialog>

export default {
  name: 'Index',
  data() {
    return {
      isCenter: true
    };
  },
  methods: {
    // 打开对话框
    openDialog() {
      this.$refs.dialog.openDialog({ title: '对话框' });
    },
    // 确认
    onConfirm(cb) {
      cb(true);
      setTimeout(() => {
        cb(false);
        this.$refs.dialog.closeDialog();
      }, 3000);
    },
    onCancel() {
      console.log('取消');
    }
  }
};

属性

参数	说明	类型	是否必须	默认值	描述
config	对话框的配置项	Object	否	-	-

config Options

参数	说明	类型	默认值
center	是否居中显示内容	Boolean	true
reverseBtn	是否反转按钮排列	Boolean	false，确认在前，取消在后
cancelBtnTitle	取消按钮的标题	String	取消
confirmBtnTitle	确认按钮的标题	String	确认
cancelBtnVisible	取消按钮是否显示	Boolean	true
confirmBtnVisible	确认按钮是否显示	Boolean	true

事件

事件名称	说明	回调参数
confirm	点击确认的回调	函数callback，传入参数true，确认按钮进入loading状态，否则关闭loading状态
cancel	点击取消的回调	-

方法

方法名称	说明	参数
openDialog	打开对话框	Object.title，对话框标题
closeDialog	关闭对话框	-

DataForm

数据表单组件，通过配置快速生成数据表单。

使用示例

template

<sw-data-form ref="dataForm" :items="formDataItems" :initial-form-data="formData" :rules="rules">
  <template #slot="{data,prop}">
    <el-input v-model="data[prop]" />
  </template>
  <template #dynamic-list-header>
    <div class="dynamic-list-header">这是动态表单的头部</div>
  </template>
  <template #dynamic-list-item="{data,prop,index}">
    <el-form-item
      :prop="`${prop}.${index}.name`"
      label-width="0"
      :rules="[{ required: true, message: '请输入插槽内容', trigger: ['blur', 'change'] }]"
    >
      <el-input v-model="data[prop][index].name" />
    </el-form-item>
  </template>
</sw-data-form>
<el-button @click="validate">校验</el-button>

import { SWDataFormValues } from 'sw-element';

export default {
  name: 'Index',
  data() {
    return {
      formData: {
        inputValue: '',
        numberInputValue: undefined,
        textareaValue: '',
        selectorValue: [],
        datePickerValue: '',
        timePickerValue: '',
        timeSelectorValue: '',
        checkboxValue: [],
        radioValue: '',
        switchValue: '1',
        textValue: '这是文本内容',
        dynamicList: [],
        slotValue: ''
      },
      rules: {
        inputValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
        numberInputValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
        textareaValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
        selectorValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        datePickerValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        timePickerValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        timeSelectorValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        checkboxValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        radioValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        slotValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }]
      },
      formDataItems: [
        {
          type: SWDataFormValues.itemType.input,
          title: '输入框',
          prop: 'inputValue',
          required: true,
          tooltip: '这是一个消息提示'
        },
        {
          type: SWDataFormValues.itemType.numberInput,
          title: '数字输入框',
          prop: 'numberInputValue',
          required: true,
          tooltip: '这是一个消息提示'
        },
        {
          type: SWDataFormValues.itemType.textarea,
          title: '文本域',
          prop: 'textareaValue',
          required: true,
          isSingleRow: true
        },
        {
          type: SWDataFormValues.itemType.selector,
          title: '选择器',
          prop: 'selectorValue',
          required: true,
          labelKey: 'displayName',
          valueKey: 'id',
          isSingleRow: true,
          bind: {
            multiple: true
          },
          options: [
            {
              id: 1,
              displayName: '选项1'
            },
            {
              id: 2,
              displayName: '选项2'
            },
            {
              id: 3,
              displayName: '选项3'
            }
          ]
        },
        {
          type: SWDataFormValues.itemType.datePicker,
          title: '时间选择器',
          prop: 'datePickerValue',
          required: true
        },
        {
          type: SWDataFormValues.itemType.timePicker,
          title: '任意时间选择器',
          prop: 'timePickerValue',
          tooltip: '这是一个消息提示'
        },
        {
          type: SWDataFormValues.itemType.timeSelector,
          title: '固定选择器',
          prop: 'timeSelectorValue',
          required: true
        },
        {
          type: SWDataFormValues.itemType.checkbox,
          title: '复选框',
          prop: 'checkboxValue',
          required: true,
          labelKey: 'displayName',
          valueKey: 'id',
          isSingleRow: true,
          bind: {
            min: 1,
            max: 2
          },
          options: [
            {
              id: 1,
              displayName: '选项1'
            },
            {
              id: 2,
              displayName: '选项2',
              bind: {
                disabled: true
              }
            },
            {
              id: 3,
              displayName: '选项3'
            },
            {
              id: 4,
              displayName: '选项4'
            }
          ]
        },
        {
          type: SWDataFormValues.itemType.radio,
          title: '单选框',
          prop: 'radioValue',
          required: true,
          labelKey: 'displayName',
          valueKey: 'id',
          isSingleRow: true,
          options: [
            {
              id: 1,
              displayName: '选项1'
            },
            {
              id: 2,
              displayName: '选项2'
            },
            {
              id: 3,
              displayName: '选项3'
            },
            {
              id: 4,
              displayName: '选项4'
            },
            {
              id: 5,
              displayName: '选项5'
            },
            {
              id: 6,
              displayName: '选项6'
            }
          ]
        },
        {
          type: SWDataFormValues.itemType.switch,
          title: '开关',
          prop: 'switchValue',
          required: true,
          bind: {
            'active-value': '1',
            'inactive-value': '2'
          }
        },
        {
          type: SWDataFormValues.itemType.text,
          title: '文本',
          prop: 'textValue',
          required: true,
          isSingleRow: true
        },
        {
          type: SWDataFormValues.itemType.dynamicList,
          title: '动态表单',
          prop: 'dynamicList',
          headerSlotName: 'dynamic-list-header',
          slotName: 'dynamic-list-item',
          isSingleRow: true,
          required: true
        },
        {
          type: SWDataFormValues.itemType.slot,
          title: '插槽',
          prop: 'slotValue',
          required: true,
          slotName: 'slot',
          isSingleRow: true
        }
      ]
    };
  },
  methods: {
    async validate() {
      await this.$refs.dataForm.validate();
    }
  }
};

属性

参数	说明	类型	是否必须
items	配置项	Array	是
initialFormData	数据模型	Object	是
config	动态表单配置	Object	否

其他扩展配置项请参考：https://element.eleme.io/#/zh-CN/component/form#form-attributes

items[] Options

参数	说明	类型	是否必须	默认值
visible	当前项是否显示	Boolean	否	true
type	类型，请引用`SWDataFormValues.itemType`中的枚举值	Array	是	-
title	标题	String	是	-
prop	属性名称	String	是	-
tooltip	提示文本	String	否	-
required	是否显示红色*号，注意，此属性不作必填的校验依据	Boolean	否	false
isSingleRow	当前配置项是否独占一行	Boolean	否	false
options	选择器选项配置	Function/Array	否，当`type`为`selector`或`checkbox`或`radio`时必填	[]
labelKey	选择器显示文本对应数据源中的key	String	否，当`type`为`selector`或`checkbox`或`radio`时必填	-
valueKey	选择器选中值对应数据源中的key	String	否，当`type`为`selector`或`checkbox`或`radio`时必填	-
slotName	插槽名称	String	否，当`type`为`slot`或`dynamicList`时必填	-
headerSlotName	动态列表表头插槽名称	String	否	-
on	各组件的事件扩展，请参考Element-UI组件库	Object	否	-
bind	各组件的属性扩展，请参考Element-UI组件库	Object	否	-

SWDataFormValues.itemType

key	value	描述
input	input	输入框
numberInput	number-input	计数器
textarea	textarea	输入框
selector	selector	选择器
datePicker	date-picker	日期选择器
timePicker	time-picker	任意时间选择器
timeSelector	time-selector	固定实现选择器
checkbox	checkbox	复选框
radio	radio	单选框
switch	switch	开关
text	text	文本
dynamicList	dynamic-list	动态列表
slot	slot	插槽，自定义表单项

config Options

参数	说明	类型	默认值
dynamicListIsOpen	动态列表是否默认展开	Boolean	false
numberOfColumn	标题右边距	Number	2

方法

方法名称	说明	参数	返回值
validate	校验表单	-	返回一个Promise，成功resolve，校验失败自动提示异常消息并reject
resetValues	重设指定属性的值和校验状态	props，表单项对应的prop集合，会清空props中对应属性的值和校验状态	-
clearValidate	重设表单的校验状态	-	-

其他说明

当type为dynamicList时，如果required为true，则会为动态列表自动创建一条数据，且当动态列表只有一条数据时，该数据不可删除。
当type为dynamicList时，绑定的数据模型会自动增加一个__key的属性用来做必要的业务处理，请在接收数据后根据业务需求自行过滤该属性。

DraggableBoard

可拖拽表单。

使用示例

template

<sw-draggable-board ref="dragBoard" group-name="groupName" :initial-data-source="draggableBoardDataSource" @move="onMove">
  <template v-slot="{data}">{{ data.label }}</template>
</sw-draggable-board>
<el-button @click="getDragResult">获取拖拽结果</el-button>

export default {
  name: 'Index',
  data() {
    return {
      draggableBoardDataSource: [
        {
          title: '列表1',
          uniqueKey: 'id',
          list: [
            {
              id: 1,
              label: 'item1'
            },
            {
              id: 2,
              label: 'item2'
            },
            {
              id: 3,
              label: 'item3'
            },
            {
              id: 4,
              label: 'item4'
            }
          ]
        },
        {
          title: '列表2',
          uniqueKey: 'id',
          list: [
            {
              id: 5,
              label: 'item5'
            },
            {
              id: 6,
              label: 'item6'
            },
            {
              id: 7,
              label: 'item7'
            },
            {
              id: 8,
              label: 'item8'
            }]
        },
        {
          title: '列表3',
          uniqueKey: 'id',
          list: [
            {
              id: 9,
              label: 'item9'
            },
            {
              id: 10,
              label: 'item10'
            },
            {
              id: 11,
              label: 'item11'
            },
            {
              id: 12,
              label: 'item12'
            }
          ]
        }
      ]
    };
  },
  methods: {
    onMove(result){
      console.log(result)
    },
    getDragResult() {
      const result = this.$refs.dragBoard.getDataSource();
      console.log(result);
    }
  }
};

属性

参数	说明	类型	是否必须
initialDataSource	初始数据源	Array	否
groupName	组名，同一组的元素可互相拖拽	String	是

initialDataSource[] Options

参数	说明	类型	是否必须
title	当前列的标题	String	是
uniqueKey	数据源中标识唯一性的key	String	是
list	列表数据源	Array	是

事件

事件名称	说明	回调参数
move	列表项拖拽的回调，返回拖拽结果	-

方法

方法名称	说明	返回值
getDataSource	获取拖拽后的数据源	返回拖拽结果

sw-element

SWElement

安装&使用

安装

使用

设置全局配置

组件清单

FilterForm

使用示例

属性

items[] Options

SWFilterFormValues.itemType

config Options

BasicTable

使用示例

属性

items[] Options

config Options

SWBasicTableValues.columnAdaptiveType

其他说明

BasicDialog

使用示例

属性

config Options

事件

方法

DataForm

使用示例

属性

items[] Options

SWDataFormValues.itemType

config Options

方法

其他说明

DraggableBoard

使用示例

属性

initialDataSource[] Options

事件

方法

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads