介绍

此组件库是基于 vue2.0 + elementui 的组件库,项目如要使用，则需要确保对 Elementui 进行了全局引用安装

npm i @cctl/ui-vue2

注册

// main.js
import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import DUI from "@cctl/ui-vue2";

Vue.config.productionTip = false;
Vue.use(ElementUI);

// 全局注册
Vue.use(DUI)

new Vue({
  render: (h) => h(App),
}).$mount("#app");

全局属性配置

Vue.use(DUI,{
    // 组件名称前缀，定义后组件使用 <Table /> 变为 <DTable>
    prefix:"D",
    // 表格组件
    table:{
        autoHeight:true， autoHeight 属性默认值为 true
    },
    
})

组件

Form

对 el-form 、el-form-item、el-row、el-col 及输入框、选择器、单选框、多选框等控件组成

可参考element-ui文档 https://element.eleme.io/#/zh-CN/component/form

示例

基本使用

<template>
  <Form :formItems="formItems" :model="formModel"></Form>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      formItems: [
        {
          label: "文本框",
          prop: "input",
          type: "Input",
          span: 24,
        },
        {
          label: "选择器",
          prop: "select",
          type: "Select",
          span: 24,
          props: {
            options: [
              {
                label: "上海",
                value: 1,
              },
              {
                label: "西安",
                value: 2,
              },
            ],
          },
        },
      ],
      formModel: {
        select: 1,
        input: "",
      },
    };
  },
};
</script>

插槽使用

<template>
  <Form :formItems="formItems" :model="formModel">
    <template #slot>
      <el-form-item prop="slot" label="插槽">
        <el-input v-model="formModel.slot"></el-input>
      </el-form-item>
    </template>
  </Form>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      formItems: [
        {
          label: "插槽",
          prop: "slot",
          span: 24,
          slot: true,
        },
      ],
      formModel: {
        input: "",
      },
    };
  },
};
</script>

事件绑定

<template>
  <Form :formItems="formItems" :model="formModel">
  </Form>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      formItems: [
        {
          label: "事件",
          prop: "input",
          type: "Input"
          span: 24,
          events:{
          	 input:()=>{
          		console.log("input事件触发")
             }  
          }
        },
      ],
      formModel: {
        input: "",
      },
    };
  },
};
</script>

Form 属性

完全兼容 el-form 属性原生属性

| 参数 | 说明 | 类型 | 默认值 | | ---------- | ------------------------------ | ------- | ------ | | formItems | 表单配置项 | array | - | | readonly | 只读模式（优先级高于禁用模式） | boolean | - | | disabled | 禁用模式（优先级高于单项配置） | boolean | - | | label-show | 是否显示标签 | boolean | true |

FormItem 属性

| 参数 | 说明 | 类型 | 可选值 | | ---------- | -------------------------------- | ---------------- | ------------------------------------------------------------ | | type | 表单类型 | string | Input、Checkbox、Radio、Select、Cascader、Switch、DatePicker | | span | 栅格占据的列数 | number | - | | props | 表单控件属性 | object | - | | isSlot | 开启插槽 | boolean | - | | show | 是否显示，用于动态切换显隐 | boolean/function | - | | label-show | 是否显示标签优先级高于 Form 属性 | boolean | - |

Table

对 el-table 、el-table-column 及输入框、选择器、单选框、多选框等控件组成

可参考element-ui文档 https://element.eleme.io/#/zh-CN/component/table

示例

基本使用

<template>
  <Table :data="tableData" :tableItems="tableItems" :pageConfig="pageConfig">
    	<template #header>
			header插槽	
		</template>  
  </Table>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pageConfig:{
        page:1, // 页码
        size:10, // 单页数量
        total:0, // 总条数
      },
      tableData: [
        {
          input: "1",
          checkbox: [],
          select: [],
          datePicker: "2025-01-24",
        },
      ],
      tableItems: [
        {
          label: "文本框",
          prop: "input",
          type: "Input",
        },
        {
          label: "文本域",
          prop: "textarea",
          type: "Input",
          props: {
            type: "textarea",
          },
        },
        {
          label: "选择器",
          prop: "select",
          type: "Select",
          props: {
            options: [
              {
                label: "上海",
                value: 1,
              },
              {
                label: "西安",
                value: 2,
              },
            ],
            props: {
              label: "name",
              value: "id",
            },
          },
        },
        {
          label: "级联选择器",
          prop: "cascader",
          type: "Cascader",
          props: {
            "show-all-levels": false,
            options: [
              {
                label: "中国",
                value: 1,
                children: [
                  {
                    label: "陕西",
                    value: 11,
                    children: [
                      {
                        label: "西安",
                        value: 111,
                      },
                    ],
                  },
                  {
                    label: "河北",
                    value: 22,
                  },
                ],
              },
            ],
          },
        },
      ],
        
        
    };
  },
};
</script>

插槽使用

<template>
  <Table :data="tableData" :tableItems="tableItems">
    	<template slot-scope="scope"  slot="input">
          	{{ scope.row.input }}
        </template>
  </Table>
</template>

<script>
import { Table } from "@cctl/ui-vue2";
export default {
  name: "App",
  components: {
    Table,
  },
  data() {
    return {
      tableData: [
        {
          input: "1",
        },
      ],
      tableItems: [
        {
          label: "文本框",
          prop: "input",
          type: "Input",
          isSlot: true,
        },
        
        
    };
  },
};
</script>

自定义渲染

<template>
  <Table :data="tableData" :tableItems="tableItems" ></Table>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      tableData: [
        {
          id: "1",
        },
      ],
      tableItems: [
        {
          label: “自定义渲染”,
          render(h,{row}){
            return h('span',row.id)
          }
        },
      ] 
        
    };
  },
};
</script>

状态

<template>
  <Table :data="tableData" :tableItems="tableItems" ></Table>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      tableData: [
        {
          status:1
        },
      ],
      tableItems: [
        {
          type:"Status",
          label: “自定义渲染”,
          prop:"status",
          props:{
              options:[
                  {
                      label:"成功",
                      value:1,
                      color:"green"
                  },
                  {
                      label:"失败",
                      value:2,
                      color:"red"
                  }
              ]
          }
        },
      ] 
        
    };
  },
};
</script>

Table 属性

完全兼容 el-table 原生属性

| 参数 | 说明 | 类型 | 默认值 | | --------- | ---------- | ----- | ------ | | tableItems | 表格配置项 | array | - | | operable | 是否可编辑 | boolean | false | | pageConfig | 分页配置，设置后自动开启分页{page:1,size:10,total:100} | object | - | | isSlot | 开启插槽 | boolean | - |

TableItems 属性

| 参数 | 说明 | 类型 | 可选值 | | ------ | ---------------------------------- | ---------------- | ------------------------------------------------------------ | | type | 列类型 | string | Status、Input、Checkbox、Radio、Select、Cascader、Switch、DatePicker | | props | 列控件属性 | object | - | | render | 自定义渲染，只针对只读状态下的渲染 | (h,{row})=>VNode | |

Events 事件

完全兼容 el-table 原生事件

| 事件名 | 说明 | 回调参数 | | ------------------- | ------------------------ | -------- | | page-size-change | pageSize 改变时会触发 | 每页条数 | | page-current-change | currentPage 改变时会触发 | 当前页 |

AdvancedSelect

高级 Select 选择器，包括全选/反选，已选展示功能

示例

基本使用

<template>
  <AdvancedSelect
    v-model="selectVal"
    :options="options"
  >
    <template v-slot:option="slotProps">
      {{ slotProps.option.label }}
    </template>

    <template v-slot:result-option="slotProps">
      {{ slotProps.option.label }}
    </template>
  </AdvancedSelect>
 
</template>

<script>
export default {
  data() {
    return {
      selectVal: [],
      options:[
          {
            label: '上海',
            value: 1,
          },
          {
            label: '北京',
            value: 2,
          },
          {
            label: '广州',
            value: 3,
          },
          {
            label: '深圳',
            value: 4,
          },
      ]
    };
  },
  methods: {
    
  },
};
</script>

属性

兼容 el-input 属性

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | --------------------------------- | -------- | ------ | | value | 选择的值，用 v-model 进行双向绑定 | array | - | | options | 下拉框配置项 | array | - | | filter | 筛选方法 | function | - | | isInvert | 开启可反选，默认关闭 | boolean | false | | filterInputProps | 筛选框属性 | object | {} | | props | 配置选项，具体见下表 | object | - | | label | 标签，仅用于展示 | | |

Props

| 参数 | 说明 | 类型 | 默认值 | | ----- | ---------------------------------- | ------ | ------- | | value | 指定选项的值为选项对象的某个属性值 | string | 'value' | | label | 指定选项标签为选项对象的某个属性值 | string | 'label' |

事件

| 事件名称 | 说明 | 回调参数 | | -------------- | --------------------- | ----------------------------- | | visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |