element UI 常用组件封装

最新推荐文章于 2024-05-22 18:11:53 发布

一朵云有多重

最新推荐文章于 2024-05-22 18:11:53 发布

阅读量1.9k

点赞数 1

分类专栏： element-ui 文章标签： ui javascript 前端

本文链接：https://blog.csdn.net/weixin_56105228/article/details/127523077

版权

element-ui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Form 表单

参数说明：

formColumn：表单数据定义例如

const cascaderProps = {
    value: "id",
    label: "name",
    children: "children",
    expandTrigger: "hover",
    checkStrictly: true,
    emitPath: false
}
[
     {
     label: "台区名称：",
     value: "name",
     type: "input",
     span: 6,
     placeholder: "请输入线路名称"
     },
     {
     label: "所属单位：",
     value: "orgId",
     span: 6,
     type: "cascader",
     options: options,//三级联动的数据
     cascaderProps: cascaderProps
     }
   ]

<template>
    <el-form
        ref="form"
        :model="formData"
    >
        <el-row class="form-row">
            <el-col
                v-for="(item,i) in formColumn"
                :span="item.span"
                :key="i"
            >
                <el-form-item :prop="item.value" :label="item.label" :rules="item.validator">
                    <template v-if="item.type==='slot'">
                        <slot :name="item.name"></slot>
                    </template>
                    <!--普通输入框-->
                    <el-input
                        v-if="item.type==='input'"
                        v-model.trim="formData[item.value]"
                        :type="item.type"
                        :disabled="item.disabled"
                        :placeholder="item.placeholder"
                    ></el-input>
                    <!-- 选择框-->
                    <el-select
                        v-if="item.type==='select'"
                        v-model="formData[item.value]"
                        :placeholder="item.placeholder"
                    >
                        <el-option
                            v-for="(childItem,childIndex) in formData[item.list]"
                            :key="childIndex"
                            :label="childItem.name"
                            :value="childItem.value"
                        />
                    </el-select>
                    <!--级联选择器-->
                    <el-cascader
                        ref="myCascader"
                        v-if="item.type==='cascader'"
                        v-model="formData[item.value]"
                        :options="item.options"
                        :props="item.cascaderProps"
                        @change="handleChange"
                    />
                    <!--日期选择框-->
                    <el-date-picker
                        v-if="item.type==='daterange'"
                        v-model="formData[item.value]"
                        type="daterange"
                        unlink-panels
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="timeChange"
                        @change="handleEvent($event,item.value,item.setting)"
                    ></el-date-picker>
                </el-form-item>
            </el-col>
            <div class="btn-list">
                <el-button class="search-btn" @click="search">查询</el-button>
                <el-button class="reset-btn" @click="reset">重置</el-button>
            </div>
        </el-row>
    </el-form>
</template>

<script>
export default {
    name: "form",
    props: ["formColumn"],
    data () {
        return {
            timeChange: {
                disabled (time) {
                    return time.getTime() > Date.now()
                }
            },
            formData: {
            },
            begDate: null,
            endDate: null,
            formatDate: [],//用来对传进来 开始时间结束时间字段的接收
        }
    },
    methods: {
        handleEvent (val, type, setting) {
            this.formatDate = setting;
        },
        handleChange () {
            if (this.$refs.myCascader[0].getCheckedNodes() && this.$refs.myCascader[0].getCheckedNodes()[0]) {
                let {id, funcType} = this.$refs.myCascader[0].getCheckedNodes()[0].data
            }
            this.$refs.myCascader[0].dropDownVisible = false
        },
        search () {
             this.$refs['form'].validate((valid) => {
                if (valid) {
                     this.$emit("search", this.formData)
                } else {
                    return false;
                }
            });
        },
        reset () {
            this.$emit("reset")
            this.$refs.form.resetFields();
        },
    }
}
</script>

<style scoped>
</style>

Table 列表

参数说明：

tableData ：列表数据
selection-change：当选择项发生变化时会触发该事件
tableColumns :表头数据
tableOperation：列表的操作项参数
tableOperation.btnList ：按钮数据
tableOperation.label ：操作列名

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" 
    :stripe="stripe" :border="border" :size="size"
    v-loading="loading"
    @selection-change="handleSelectionChange"
    >
    <!-- 是否支持复选 -->
    <el-table-column v-if="isSelection" width="55" type="selection" />
      <el-table-column
        :prop="item.param"
        :label="item.lable"
        v-for="(item, index) in tableColumns"
        :key="index"
        :sortable="item.sortable"
        :width="item.width"
      >
        <template slot-scope="scope">
           <!-- 有指定的渲染方式 -->
          <span v-if="item.render">{{item.render(scope.row)}}</span>
           <!-- 有插槽 -->
          <slot v-else-if="item.slotName" :name="item.slotName" :scope="scope"></slot>
           <!-- 默认方式 -->
          <span v-else>{{scope.row[item.param]}}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column v-if="tableOperation.label" :label="tableOperation.label">
        <template slot-scope="scope">
            <slot :name="tableOperation.param" :scope="scope">
              <el-button
                size="small"
                v-for="(item, index) in tableOperation.btnList"
                :key="index"
                @click="handleClick(scope.row, item.type)">
                {{item.label}}
              </el-button>
            </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "Table",
  props: {
    tableColumns: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    tableData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    tableOperation: {
      type: Object,
      default: () => {
        return {}
      }
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    loading: {
      type: Boolean,
      default: false
    },
    isSelection: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClick(row, type) {
      this.$emit('handleClick', row, type)
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    }
  }
}
</script>

Dialog 弹窗

参数说明：

title（string）弹窗标题
visible（boolean）控制是否打开弹窗
dialogClose （fun）dialog 关闭的回调
弹窗底部按钮组

<template>
    <el-dialog
      custom-class="uq-dialog-custom"
      :title="$slots.title ? '' : title"
      :visible.sync="visible"
      :width="width"
      :append-to-body="appendToBody"
      :modal="modal"
      :close-on-click-modal="false"
      :fullscreen="fullscreen"
      :destroy-on-close="destroyOnClose"
      :modal-append-to-body="modalAppendToBody"
      @close="close"
    >
      <template v-if="$slots.title">
        <span slot="title">
          <slot name="title" />
        </span>
      </template>
      <slot />
      <span slot="footer" class="dialog-footer">
        <slot name="footer" />
      </span>
    </el-dialog>
  </template>
   
  <script>
  export default {
    name: 'Dialog',
    props: {
      show: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '提示'
      },
      appendToBody: {
        // Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
        type: Boolean,
        default: true
      },
      modalAppendToBody: {
        // 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
        type: Boolean,
        default: true
      },
      modal: {
        // 是否需要遮罩层
        type: Boolean,
        default: true
      },
      fullscreen: {
        // 是否全屏
        type: Boolean,
        default: false
      },
      destroyOnClose: {
        // 关闭时销毁 Dialog 中的元素
        type: Boolean,
        default: true
      },
      width: {
        type: String,
        default: '30%'
      }
    },
    computed: {
      visible: {
        get() {
          return this.show
        },
        set(val) {
          console.log(val)
          this.$emit('update:show', val) // visible 改变的时候通知父组件
        }
      }
    },
    data() {
      return {
      }
    },
    methods: {
      close() {
        // Dialog 关闭的回调
        this.$emit('close')
        console.log('close')
      },
  
    }
  }
  </script>
   
  <style scoped lang="scss">
  </style>

Pagination 分页

参数说明：

@size-change pageSize 改变时会触发回调参数是每页条数
@current-change currentPage 改变时会触发回调参数是当前页

<template>
  <div class="pagination-box">
    <el-pagination
      ref="comPagination"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      layout=" total,prev, pager, next, sizes"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    currentPage: {
      required: false,
      default: 1,
    },
    pageSize: {
      required: false,
      default: 50,
    },
    pageSizes: {
      required: false,
      type: Array,
      default: () => [50,100,200]
    },
    total: {
      required: false,
      default: 0,
    }
  },
  data () {
    return {}
  },
  methods: {
    //size 变化
    handleSizeChange (val) {
      this.$emit("changeSize", val)
    },
    //当前页变化
    handleCurrentChange (val) {
      this.$emit("changeCurrent", val)
    },
  },

}
</script>

<style  scoped>
</style>

消息弹窗

参数说明：

type（string）：success/warning/info/error
msg（string）：提示消息
duration（number）：时间

import {Message, MessageBox, Notification} from 'element-ui'

export default {
    openConfirm: (msg, type, okCallback, errCallback) => {
        MessageBox.confirm(msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: type
        }).then(() => {
            okCallback()
        }).catch(() => {
            errCallback()
        })
    },
 
    message(msg, type, duration) {
        Message({
            message: msg,
            type: type || 'success',
            duration: duration || 1000
        })
    },
  
    notice(msg, type, duration) {
        Notification(
            {
                title: '消息',
                message: msg,
                type: type || 'success',
                duration: duration || 2000
            }
        )
    }
}

breadcrumb 面包屑

参数说明：

breadList（Array）：页签数据
separator-class ：图标分隔符 class

<template>
  <!--面包屑-->
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" >
        <el-breadcrumb-item 
        v-for="(item, index) in breadList" 
        :key="index" 
        :to="{ path: '/' + item.path }"
        >
          {{ item.title }}
        </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
      name: "Mooc-learning-content",
      props: ['breadList'],
      data () {
        return {
        }
      },
      created () {
      },
      methods: {
      },
      watch: {
      }
}
</script>

Tabs 标签页

参数说明：

activeName（string）：选中选项卡的 name
tab-click ：tab 被选中时触发

<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane 
            v-for="(item) in tabList" 
            :key="item.name"
            :label="item.label"
            :name="item.name"
        >
        	{{item.name}}</el-tab-pane>
    	</el-tabs>
</template>
<script>
export default {
    props: ['tabList'],
    data () {
        return {
            activeName: this.tabList[0]
        };
    },
    methods: {
        handleClick (tab, event) {
            console.log(tab, event);
            this.$emit("tabClick")
        },
    }
};
</script>

Tree 树形控件

参数说明：

expandNode：是否展开所有节点
isShowFilter ：是否需要节点过滤
treeProps：treeProps
handleNodeClick：节点被点击时的回调
handleCheck：当复选框被点击的时候触发
handleCheckChange：节点选中状态发生变化时的回调
getCurrentKey
getCurrentNode
setCurrentKey
getCheckedKeys
getCheckedNodes 方法：同element-ui

<template>
    <div class="baseTree">
        <el-input v-if="isShowFilter" size="small" :placeholder="placeholder" v-model="filterText">
        </el-input>
        <el-tree ref="baseTree"
                 :data="treeList"
                 :node-key="treeProps.id"
                 :props="treeProps"
                 :highlight-current="highlight"
                 :accordion="accordion"
                 :default-expand-all="expand"
                 :default-expanded-keys="expandedKeys"
                 :auto-expand-parent="expandParent"
                 :expand-on-click-node="expandNode"
                 :show-checkbox="multiple"
                 :check-strictly="checkStrictly"
                 :filter-node-method="filterNode"
                 @node-click="handleNodeClick"
                 @node-expand="handleNodeExpand"
                 @node-collapse="handleNodeCollapse"
                 @check="handleCheck"
                 @check-change="handleCheckChange"
        >
        </el-tree>
    </div>
</template>

<script>
export default {
    props: {
        treeList: {
            type: Array,
            default () {
                return [];
            }
        },
        // 默认树形结构配置项
        treeProps: {
            type: Object,
            default () {
                return {
                    id: 'id', // Number类型：树组件ID(node-key)
                    label: 'label', // String类型 : 树组件显示名称
                    pid: 'parentId', // Number类型：父级ID
                    children: 'children' // String类型：子节点
                };
            }
        },
        // 自动收起
        accordion: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        // 是否展开所有节点，默认展开
        expand: {
            type: Boolean,
            default () {
                return true;
            }
        },
        // 展开子节点的时候是否自动展开父节点 默认值为 true
        expandParent: {
            type: Boolean,
            default () {
                return true;
            }
        },
        // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
        expandNode: {
            type: Boolean,
            default () {
                return true;
            }
        },
        // 默认展开的节点的 key 的数组
        expandedKeys: {
            type: Array,
            default () {
                return [];
            }
        },
        // 是否高亮当前选中节点，默认值是 true
        highlight: {
            type: Boolean,
            default () {
                return true;
            }
        },
        // 是否可多选，默认单选
        multiple: {
            type: Boolean,
            default () {
                return false;
            }
        },
        // 显示复选框情况下，是否严格遵循父子不互相关联
        checkStrictly: {
            type: Boolean,
            default () {
                return false;
            }
        },
        // 图标url
        iconUrl: {
            type: String,
            default () {
                return '';
            }
        },
        placeholder: {
            type: String,
            default: () => {
                return '检索关键字';
            }
        },
        // 是否需要关键字过滤
        isShowFilter: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    },
    data () {
        return {
            filterText: '',
            visible: false
        };
    },
    methods: {
        //对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
        filterNode (value, data) {
            if (!value) return true;
            return data[this.treeProps.label].indexOf(value) !== -1;
        },
        //节点被展开时触发的事件
        handleNodeExpand (data, node, vueComponent) {
            this.$emit('handleNodeExpand', data);
        },
        //节点被关闭时触发的事件
        handleNodeCollapse (data, node, vueComponent) {
            this.$emit('handleNodeCollapse', data);
        },
        //节点被点击时的回调
        handleNodeClick (data, node, vueComponent) {
            this.$emit('handleNodeClick', data);
        },

        //当复选框被点击的时候触发
        handleCheck (node, checkedData) {
            // console.log('handleCheck: ', node, checkedData)
            this.$emit('handleCheck', node, checkedData);
        },
        //节点选中状态发生变化时的回调
        handleCheckChange (data, checked) {
            let currentNode = this.$refs.baseTree.getNode(data);
            // console.log('handleCheckChange: ', data, checked)
            if (this.checkStrictly) {
                // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联
                if (checked) {
                    // 选中 子节点只要被选中父节点就被选中
                    this.parentNodeChange(currentNode);
                } else {
                    // 未选中 处理子节点全部未选中
                    this.childNodeChange(currentNode);
                }
            }
            this.$emit('handleCheckChange', data, checked);
        },
        //获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
        getCurrentKey: function () {
            return this.$refs.baseTree.getCurrentKey();
        },
        //获取当前被选中节点的 data，若没有节点被选中则返回 null
        getCurrentNode: function () {
            return this.$refs.baseTree.getCurrentNode();
        },
        //通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
        setCurrentKey: function (key) {
            // $nextTick 是确保DOM渲染结束之后执行的
            this.$nextTick(() => {
                this.$refs.baseTree.setCurrentKey(key);
            })
        },
        setCurrentNode: function (node) {
            // $nextTick 是确保DOM渲染结束之后执行的
            this.$nextTick(() => {
                this.$refs.baseTree.setCurrentNode(node);
            })
        },
        //若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
        getCheckedKeys: function () {
            return this.$refs.baseTree.getCheckedKeys();
        },
        //若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
        getCheckedNodes: function () {
            return this.$refs.baseTree.getCheckedNodes();
        },
        //通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
        setCheckedKeys: function (keys) {
            // if(!keys)keys = [];
            const leafOnly = false;
            this.$nextTick(() => {
                this.$refs.baseTree.setCheckedKeys(keys, leafOnly);
            })
        },
        //通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性
        setChecked: function (val, checked, deep) {
            this.$refs.baseTree.setChecked(val, checked);
        },
        // 统一处理子节点为不选中
        childNodeChange (node) {
            for (let i = 0; i < node.childNodes.length; i++) {
                node.childNodes[i].checked = false;
                this.childNodeChange(node.childNodes[i]);
            }
        },
        // 统一处理父节点为选中
        parentNodeChange (node) {
            if (node.parent.key !== undefined) {
                node.parent.checked = true;
                this.parentNodeChange(node.parent);
            }
        }
    },
 
    watch: {
        filterText (val) {
            this.$refs.baseTree.filter(val);
        }
    }
};
</script>

<style lang="scss">
// 字体和大小
.custom-tree-node {
    font-family: "Microsoft YaHei";
    position: relative;
}

// 选中状态背景色
.baseTree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #F5F7FA !important;
}

// 原生el-tree-node的div是块级元素，需要改为inline-block，才能显示滚动条
.baseTree .el-tree > .el-tree-node {
    display: inline-block;
    min-width: 100%;
}

</style>