kp-element-ui

930

Install
`npm install kp-element-ui`
Latest Version:	1.0.12 (May 20, 2024)
Vue:	2
Last Updated:	May 20, 2024
Links:	npm

Maintainer: jaypan0629

kp-element-ui

一、安装依赖以及全局注册

1、安装

npm i kp-element-ui

2、全局注册

// main.js
// import
import KpElementUI from 'kp-element-ui';

// mount
Vue.use(KpElementUI);

二、组件文档 Components document

1、kp-input 文本输入框

1.1.1 属性 Attributes

参数	说明	类型
$attrs	继承el-input组件的属性，参考elementUI官网
value	给组件赋初始值	string/number

1.1.2 事件 Events

事件名称	说明	回调参数
input	在 Input 值改变时触发	(value: string \| number)

1.1.3 用例

<template>
  <kp-input v-model="inputValue"></kp-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ""
    }
  }
}
</script>

2、kp-input-number 计数器

2.1.1 属性 Attributes

参数	说明	类型
$attrs	继承el-input-number组件的属性，参考elementUI官网
value	给组件赋初始值	number

2.1.2 事件 Events

事件名称	说明	回调参数
input	在 Input 值改变时触发	(value: number)

2.1.3 用例

<template>
  <kp-input-number v-model="numberValue"></kp-input-number>
</template>

<script>
export default {
  data() {
    return {
      numberValue: 2
    }
  }
}
</script>

3、kp-radio 单选框

3.1.1 属性 Attributes

参数	说明	类型
$attrs	继承el-radio组件的属性，参考elementUI官网
value	给组件赋初始值	string / number / boolean
options	单选数据集	array

options 属性

参数	说明	类型
label	选项选中值	string/number/boolean
name	选项显示文本	string
attrs	继承el-radio属性，参考elementUI官网	object

3.1.2 事件 Events

事件名称	说明	回调参数
input	在 radio 选中值改变时触发	(value: string/number/boolean)

3.1.3 用例

<template>
  <kp-radio :options="radioOptions" v-model="radioValue"></kp-radio>
</template>

<script>
export default {
  data() {
    return {
      radioOptions: [
        { label: "1", name: "男", attrs: { border: true } },
        { label: "0", name: "女" },
      ],
      radioValue: ""
    }
  }
}
</script>

4、kp-checkbox 复选框

4.1.1 属性 Attributes

参数	说明	类型
$attrs	继承el-checkbox组件的属性，参考elementUI官网
value	给组件赋初始值	number
options	复选框集合	object

options 属性

参数	说明	类型
label	选项选中值	string/number/boolean
name	选项显示文本	string
attrs	继承el-checkbox属性，参考elementUI官网	object

4.1.2 事件 Events

事件名称	说明	回调参数
input	在勾选值改变时触发	(value: array)

4.1.3 用例

<template>
  <kp-checkbox :options="options" v-model="value"></kp-checkbox>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          label: "1",
          name: "笑死1",
        },
        {
          label: "2",
          name: "笑死2",
        },
        {
          label: "3",
          name: "笑死3",
        },
      ],
      value: []
    }
  }
}
</script>

5、kp-select 下拉选择框

4.1.1 属性 Attributes

参数	说明	类型
$attrs	继承el-select组件的属性，参考elementUI官网
value	给组件赋初始值	number
options

options 属性

参数	说明	类型
value	选项选中值	string/number/boolean
label	选项显示文本	string
attrs	继承el-options属性，参考elementUI官网	object

4.1.2 事件 Events

事件名称	说明	回调参数
input	在 Input 值改变时触发	(value: number)

4.1.3 用例

5<template>
  <kp-select :options="selectOptions" v-model="selectVal"></kp-select>
</template>

<script>
export default {
  data() {
    return {
      selectOptions: [
        { label: "詹姆斯", value: 1, attrs: { disabled: true } },
        { label: "库里", value: 2 },
        { label: "杜兰特", value: 3 },

      ],
      selectVal: ''
    }
  }
}
</script>

5、kp-switch 开关

1.1.1 属性 Attributes

参数	说明	类型
$attrs	继承el-switch组件的属性，参考elementUI官网
value	给组件赋初始值	string/number/boolean

1.1.2 事件 Events

事件名称	说明	回调参数
input	在值改变时触发	新状态的值

1.1.3 用例

<template>
  <kp-switch v-model="switchVal"></kp-switch>
</template>

<script>
export default {
  data() {
    return {
      switchVal: true
    }
  }
}
</script>

6、kp-table 表格

6.1.1 属性 Attributes

参数	说明	类型	可选值	默认值
$attrs	继承el-table组件的属性，参考elementUI官网
conditions	搜索条件，内部对象详细属性见下面内容	array		[]
columns	表格列，内部对象详细属性见下面内容	array		[]
formItems	表单项控件信息，内部对象详细属性见下面内容	array		[]
toolbarBtnList	工具跳右侧操作按钮集合，内部对象详细属性见下面内容	array		[]
editFormAttrs	编辑表单属性，继承el-form属性，参考elementUI官网	object		{}
formDialogAttrs	表单弹窗属性，继承el-dialog属性，参考elementUI官网	object		{}
rules	编辑表单校验，参考elementUI官网 form组件校验规则	array		[]
toobarStatus	表格顶部工具条显示状态	boolean	false	true
showOperateColumn	表格操作列显示状态	boolean	false	true
ifShowPagination	是否展示分页器	boolean	false	true
total	总数据	number		0
pageSizes	分页数组	array		[10, 20, 30, 40]

conditions 搜索条件对象属性

参数	说明	类型
tag	搜索条件所属组件的标签名，例如：kp-input、kp-select	string
field	搜索条件绑定的关键字	string
ifUseSlot	是否使用自定义组件并通过插槽替换	boolean
attrs	挂载组件原生属性的对象，可参照上文基础组件属性说明	object

columns 表格列对象属性

参数	说明	类型
prop	列绑定的展示字段，对应表格数据对象中的键	string
label	列说明文本	string
type	列的展示类型，值暂定为两种 text / slot。text为普通显示文本；slot表示自定义显示内容，对应插槽名称与prop同值。	string

formItems 编辑表单所属表单项的属性

参数	说明	类型
tag	表单项的组件标签名	string
name	表单项组件名	string
span	表单项所占的栅格值	number
label	表单项的文本标识	string
field	表单项目绑定的字段	string
ifTableShowField	是否表格显示字段	boolean
ifTableSearchField	是否表格搜索字段	boolean
ifUseSlot	是否自定义组件并使用插槽替换，插槽名为 form- + 绑定字段field的值，例如：<template #form-username>	boolean
attrs	组件继承的属性对象，具体属性可参照上文基础组件属性说明	object
styleObj	组件继承的样式对象	object

toolbarBtnList 表格顶部工具条右侧操作按钮集合

参数	说明	类型
name	按钮文本	string
eventName	事件名	string
type	按钮类型，默认primary	string
icon	按钮icon	string

6.1.2 事件 Events

事件名称	说明	回调参数
search	table搜索关键字事件	顶部搜索字段以及对应值
submitForm	提交编辑表单事件	表单数据
getFormInfo	获取编辑表单绑定的数据	表单数据
handleToolbarClickEvent	表单顶部工具条按钮点击事件	工具条按钮事件名

6.1.3 用例

<template>
  <div>
    <kp-table
      ref="kpTable"
      border
      :data="list"
      :conditions="conditions"
      :columns="columns"
      :toolbarBtnList="toolbarBtnList"
      :formItems="formItems"
      :formDialogAttrs="formDialogAttrs"
      :editFormAttrs="editFormAttrs"
      @search="search"
      @submit="submitForm"
      @getFormInfo="getFormInfo"
    >
      <template #form-hobby>
        <kp-input :value="hobby" @input="hobbyChange"></kp-input>
      </template>
    </kp-table>
  </div>
</template>
<script>
import KpTable from "../packages/table/table.vue";
import KpInput from "../packages/input/input.vue";
export default {
  name: "standard-table",
  components: {
    KpTable,
    KpInput,
  },
  data() {
    return {
      hobby: "",
      list: [
        {
          name: "杰哥",
          address: "尖沙咀弥敦道229号",
          hobby: "篮球",
          aducation: "研究生",
        },
      ], // 表格数据
      columns: [
        { prop: "name", label: "姓名：", type: "text" },
        { prop: "address", label: "地址：", type: "text" },
        { prop: "hobby", label: "爱好：", type: "text" },
        { prop: "aducation", label: "学历：", type: "text" },
      ], // 表格列数据
      conditions: [
        {
          tag: "kp-input",
          field: "name",
          ifUseSlot: false,
          attrs: { placeholder: "请输入姓名", disabled: false },
        },
        {
          tag: "kp-radio",
          field: "aducation",
          ifUseSlot: true,
          attrs: {
            disabled: false,
            options: [
              { name: "大学", label: "1" },
              { name: "大专", label: "2" },
              { name: "55", label: "55", value: "5" },
              { name: "66", label: "66", value: "5" },
              { name: "dsd", label: "dsdsd" },
            ],
            placeholder: "请选择学历",
          },
        },
      ], // 表格查询条件
      toolbarBtnList: [{ name: "导入", eventName: "import", type: "primary" }], // 工具栏按钮数据
      formDialogAttrs: {}, // 编辑表单弹框属性
      editFormAttrs: {
        "label-width": "120px",
      }, // 编辑表单配置数据
      formItems: [
        [
          {
            name: "文本框",
            tag: "kp-input",
            span: 24,
            label: "姓名：",
            field: "name",
            ifTableShowField: true,
            ifTableSearchField: true,
            ifEditFormField: true,
            ifUseSlot: false,
            attrs: { placeholder: "请输入姓名", disabled: false },
            styleObj: {},
          },
        ],
        [
          {
            name: "文本框",
            tag: "kp-input",
            span: 24,
            label: "地址：",
            field: "address",
            ifTableShowField: true,
            ifTableSearchField: false,
            ifEditFormField: true,
            ifUseSlot: false,
            attrs: { placeholder: "请输入地址", disabled: false },
            styleObj: {},
          },
        ],
        [
          {
            name: "选择框",
            tag: "kp-select",
            span: 24,
            label: "爱好：",
            field: "hobby",
            ifTableShowField: true,
            ifTableSearchField: false,
            ifEditFormField: true,
            ifUseSlot: false,
            attrs: {
              placeholder: "请选择爱好",
              disabled: false,
              options: [
                { label: "运动", value: "1" },
                { label: "阅读", value: "2" },
                { label: "3", value: "3" },
                { label: "4", value: "4" },
                { label: "5", value: "5" },
                { label: "6", value: "6" },
                { label: "7", value: "7" },
              ],
            },
            styleObj: {},
          },
        ],
        [
          {
            name: "单选框",
            tag: "kp-radio",
            span: 24,
            label: "学历：",
            field: "aducation",
            ifTableShowField: true,
            ifTableSearchField: true,
            ifEditFormField: true,
            ifUseSlot: true,
            attrs: {
              disabled: false,
              options: [
                { name: "大学", label: "1" },
                { name: "大专", label: "2" },
                { name: "55", label: "55", value: "5" },
                { name: "66", label: "66", value: "5" },
                { name: "dsd", label: "dsdsd" },
              ],
              placeholder: "请选择学历",
            },
            styleObj: {},
          },
        ],
      ], // 编辑表单内容数据
    };
  },
  methods: {
    // 查询事件
    search(condition) {
      console.log("搜索条件内容：", condition);
    },
    // 提交编辑表单内容事件
    submitForm(data) {
      console.log("编辑表单提交内容", data);
    },
    hobbyChange(val) {
      this.hobby = val;
      this.$refs["kpTable"].changeFormValue("hobby", val);
    },
    getFormInfo(info) {
      this.hobby = info.hobby;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

7、kp-linked-table 树表联动组件

7.1.1 属性 Attributes

参数	说明	类型
treeAttrs	左侧树组件绑定的属性，详情请参考elementUI	object
treeTopToolbar	左侧树顶部工具栏按钮集合	array
tableAttrs	kp-table组件属性，参照上文kp-table属性文档

7.1.2 事件 Events

事件名称	说明	回调参数
treeNodeClick	点击树节点事件	节点对象
tableSearch	表格关键字查询事件	搜索条件对象
tableFormSubmit	编辑表单提交事件	表单数据
treeAddChild	添加树子节点事件	添加子节点的节点对象
treeDeleteChild	删除树节点事件	删除节点的对象
treeUpdateChild	修改树节点事件	修改节点的对象
handleToolbarClickEvent	处理工具条按钮事件	工具条按钮事件名

7.1.3 用例

<kp-linked-table
  :tree-top-toolbar="treeBtnsList"
  :tree-attrs="treeAttrs"
  :table-attrs="tableAttrs"
  @treeNodeClick="treeNodeClick"
  @tableSearch="tableSearch"
  @tableFormSubmit="tableFormSubmit"
  @treeAddChild="treeAddChild"
  @treeUpdateChild="treeUpdateChild"
  @treeDeleteChild="treeDeleteChild"
  @handleToolbarClickEvent="handleToolbarClickEvent"
>
  <template #operate>
    <el-table-column label="操作" fixed="right">
      <template v-slot="scope">
        <el-button
          type="primary"
          @click="$message.success(`粉丝数量：${scope.row.fans}`)"
          size="mini"
        >
          编辑
        </el-button>
      </template>
    </el-table-column>
  </template>
  <template #form-fans>
     <kp-input placeholder="请输入粉丝"></kp-input>
  </template>
</kp-linked-table>
    
<script>
export default {
  name: "App",
  data() {
    return {
      treeAttrs: {
        data: [
          {
            id: 1,
            label: "超级巨星",
            children: [
              { id: 7, label: "勒布朗" },
              { id: 13, label: "库里" },
              { id: 14, label: "巴特勒" },
            ],
          },
          {
            id: 2,
            label: "巨星",
            children: [
              { id: 4, label: "杜兰特" },
              { id: 5, label: "字母歌" },
            ],
          },
          {
            id: 3,
            label: "明星",
            children: [{ id: 9, label: "英格拉姆" }],
          },
        ],
        "node-key": "id",
      },
      tableAttrs: {
        border: true,
        data: [
          { id: 1, starName: "勒布朗", fans: 20000000 },
          { id: 2, starName: "库里", fans: 18000000 },
          { id: 3, starName: "巴特勒", fans: 200000 },
          { id: 4, starName: "勒布朗", fans: 200000 },
          { id: 5, starName: "杜兰特", fans: 195855 },
          { id: 6, starName: "字母歌", fans: 6555555 },
          { id: 7, starName: "英格拉姆", fans: 9999 },
          { id: 8, starName: "科比", fans: 5555123 },
          { id: 9, starName: "韦德", fans: 1591354 },
          { id: 10, starName: "利拉德", fans: 159555 },
        ],
        columns: [
          {
            prop: "fans",
            label: "粉丝数量",
            type: "text",
            attrs: {
              // align: "center"
            },
          },
          {
            prop: "starName",
            label: "球星名称",
            type: "text",
            attrs: {
              // align: "center"
            },
          },
          {
            prop: "operate",
            label: "操作",
            type: "slot",
            attrs: {},
          },
        ],
        conditions: [
          {
            tag: "kp-input",
            field: "starName",
            ifUseSlot: false,
            attrs: { placeholder: "请输入球星名称" },
          },
        ],
        formItems: [
          [
            {
              tag: "kp-input",
              label: "球星名：",
              span: 24,
              field: "starName",
              attrs: {
                placeholder: "请输入球星名",
              },
            },
          ],
          [
            {
              tag: "kp-input-number",
              label: "粉丝数量：",
              span: 24,
              field: "fans",
            },
          ],
        ],
        editFormAttrs: {
          "label-width": "100px",
        },
      },
      starList: [
        { id: 1, starName: "勒布朗", fans: 20000000 },
        { id: 2, starName: "库里", fans: 18000000 },
        { id: 3, starName: "巴特勒", fans: 200000 },
        { id: 4, starName: "勒布朗", fans: 200000 },
        { id: 5, starName: "杜兰特", fans: 195855 },
        { id: 6, starName: "字母歌", fans: 6555555 },
        { id: 7, starName: "英格拉姆", fans: 9999 },
        { id: 8, starName: "科比", fans: 5555123 },
        { id: 9, starName: "韦德", fans: 1591354 },
        { id: 10, starName: "利拉德", fans: 159555 },
      ],
      treeBtnsList: [
        {
          name: "添加顶级节点", // 按钮名称
          type: "", // 按钮类型
          icon: "", // 按钮标识
          eventName: "addTopNode", // 事件名称
        },
      ],
      radioValue: "",
      selectOptions: [
        { label: "詹姆斯", value: 1, attrs: { disabled: true } },
        { label: "库里", value: 2 },
        { label: "杜兰特", value: 3 },
      ],
      selectVal: "",
      switchVal: true,
    };
  },
  methods: {
    treeNodeClick(nodeObj) {
      console.log("nodeObj", nodeObj);
      this.$set(
        this.tableAttrs,
        "data",
        this.starList.filter((item) => item.starName === nodeObj.label)
      );
    },
    /**
     * 表格搜索条件
     * @param {*} condition
     */
    tableSearch(condition) {
      console.log("condition", condition);
      const { starName } = condition;
      if (starName) {
        this.$set(
          this.tableAttrs,
          "data",
          this.starList.filter((item) => item.starName === starName)
        );
      } else {
        this.$set(this.tableAttrs, "data", [...this.starList]);
      }
    },
    /**
     * 表格表单提交
     */
    tableFormSubmit(formData) {
      console.log("formData", formData);
    },
    treeAddChild(nodeData) {
      console.log("nodeData", nodeData);
    },
    treeUpdateChild(nodeData) {
      console.log("nodeData", nodeData);
    },
    treeDeleteChild(nodeData) {
      console.log("nodeData", nodeData);
    },
    handleToolbarClickEvent(eventName) {
      this[eventName] && this[eventName]();
    },
    addTopNode() {
      console.log("添加顶级节点");
    },
  },
};
</script>

Version History

Version	Released	Vue
1.0.12	May 20, 2024	^2.6.14
1.0.11	May 20, 2024	^2.6.14
1.0.10	May 16, 2024	^2.6.14
1.0.9	May 15, 2024	^2.6.14
1.0.8	May 15, 2024	^2.6.14
1.0.7	May 15, 2024	^2.6.14
1.0.6	May 14, 2024	^2.6.14
1.0.5	May 14, 2024	^2.6.14
1.0.4	Oct 23, 2023	^2.6.14
1.0.3	Oct 10, 2023	^2.6.14
1.0.2	Oct 10, 2023	^2.6.14
1.0.1	Oct 10, 2023	^2.6.14
1.0.0	Oct 10, 2023	^2.6.14
0.2.22	Oct 5, 2023	^2.6.14
0.2.21	Sep 24, 2023	^2.6.14
0.2.20	Sep 23, 2023	^2.6.14
0.2.19	Sep 23, 2023	^2.6.14
0.2.18	Sep 23, 2023	^2.6.14
0.2.17	Sep 22, 2023	^2.6.14
0.2.16	Sep 19, 2023	^2.6.14
0.2.15	Sep 19, 2023	^2.6.14
0.2.14	Sep 18, 2023	^2.6.14
0.2.13	Sep 18, 2023	^2.6.14
0.2.12	Sep 17, 2023	^2.6.14
0.2.11	Sep 17, 2023	^2.6.14
0.2.10	Sep 17, 2023	^2.6.14
0.2.9	Sep 17, 2023	^2.6.14
0.2.8	Sep 17, 2023	^2.6.14
0.2.7	Sep 17, 2023	^2.6.14
0.2.6	Sep 13, 2023	^2.6.14