美文网首页
elementUI相关

elementUI相关

作者: hszz | 来源:发表于2021-10-07 23:04 被阅读0次

    <el-date-picker>日期选择器 保存后时间显示提前一天问题

    需要添加属性 value-format="yyyy-MM-dd HH:mm:ss"
    https://blog.csdn.net/finally_flx/article/details/109599094

    修改elementUI组件样式

    可以通过/deep/ 操作符( >>> 的别名)
    可以不用去除scoped,穿透scoped。

    例如
    <style scoped>
    外层 >>> 第三方组件 {
        样式
    }
    /deep/  第三方组件 {
        样式
    }
    </style>
    

    Table-column(table表格)

    fixed="right" 列固定在右边侧
    label-width="100px" 标签的宽度
    :header-cell-style="{'background':'#f5f8ff'}" 设置表头颜色
    min-width 最小宽度
    

    v-loading="loading"

    在表格等容器中加载数据时显示。

    el-checkbox

    正方选择框

    el-button按钮

    size="medium" type="primary" 大小和类型
    

    DatePicker 日期选择器

    el-image图片

    <el-image style="width: 96px; height: 34px;"></el-image>
    

    el-select选择框

    <el-select class="ls-select-id" v-model="form.region" placeholder="会员编号">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
    </el-select>
    

    dialog对话框

    :modal-append-to-body="false"
    遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上
    

    el-input输入框

    type="textarea" // 可拉伸文本域
    :rows="2" // 控制文本域高度
    :autosize="{ minRows: 2, maxRows: 4}" // 可自适应文本高度(最少显示两行,最多显示4行)
    
    maxlength="64" // 最大输入长度64
    
    • 当需要验证数字时,需要用v-model.number来绑定数字,不然会当成字符串处理。
     <el-input v-model.number="tax.salary"></el-input>
    

    el-page-header 页面头部

    <el-page-header @back="$router.go(-1)" content="详情页面">
    </el-page-header>
    可以通过$router.go(-1)返回上一页
    

    Message 消息提示框

    用在操作完成后的 成功/失败被动提示

    MessageBox.confirm 询问框

    用在操作前的 是否执行这些 的询问框

    el-scrollbar 滚动条

    https://www.cnblogs.com/myfirstboke/p/10218138.html
    https://blog.csdn.net/weixin_43216105/article/details/89520534

    el-form 表单组件

    • required>能使前面有个红*号
    <el-form-item label="注册方式" required>
    

    相关文章

      网友评论

          本文标题:elementUI相关

          本文链接:https://www.haomeiwen.com/subject/rsyenltx.html