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>