kp-element-ui v1.0.4

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

1.1.2 事件 Events

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

2.1.2 事件 Events

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

options 属性

3.1.2 事件 Events

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

options 属性

4.1.2 事件 Events

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

options 属性

4.1.2 事件 Events

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

1.1.2 事件 Events

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

conditions 搜索条件对象属性

columns 表格列对象属性

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

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

6.1.2 事件 Events

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

7.1.2 事件 Events

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>