组件element------form组件（2），Switch 开关-----Form 表单

最新推荐文章于 2024-04-30 10:38:05 发布
最新推荐文章于 2024-04-30 10:38:05 发布
阅读量2.9k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45343884/article/details/98848053
版权

（7）Switch 开关
基本用法—绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

	**文字描述**-----使用active-text属性与inactive-text属性来设置开关的文字描述。

在这里插入图片描述

<el-switch
  v-model="value1"
  active-text="按月付费"
  inactive-text="按年付费">
</el-switch>
<el-switch
  style="display: block"
  v-model="value2"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="按月付费"
  inactive-text="按年付费">
</el-switch>

<script>
  export default {
    data() {
      return {
        value1: true,
        value2: true
      }
    }
  };
</script>

	**扩展的 value 类型**----设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。

在这里插入图片描述

<el-tooltip :content="'Switch value: ' + value" placement="top">
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </el-switch>
</el-tooltip>

<script>
  export default {
    data() {
      return {
        value: '100'
      }
    }
  };
</script>

	**禁用状态**----设置disabled属性，接受一个Boolean，设置true即可禁用。

在这里插入图片描述

<el-switch
  v-model="value1"
  disabled>
</el-switch>
<el-switch
  v-model="value2"
  disabled>
</el-switch>
<script>
  export default {
    data() {
      return {
        value1: true,
        value2: false
      }
    }
  };
</script>

Attributes

在这里插入图片描述
在这里插入图片描述
（8）Slider 滑块
基础用法
在这里插入图片描述

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">自定义初始值</span>
    <el-slider v-model="value2"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">隐藏 Tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">格式化 Tooltip</span>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">禁用</span>
    <el-slider v-model="value5" disabled></el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42
      }
    },
    methods: {
      formatTooltip(val) {
        return val / 100;
      }
    }
  }
</script>


	**离散值**-----改变step的值可以改变步长，通过设置show-stops属性可以显示间断点

在这里插入图片描述

<template>
  <div class="block">
    <span class="demonstration">不显示间断点</span>
    <el-slider
      v-model="value1"
      :step="10">
    </el-slider>
  </div>
  <div class="block">
    <span class="demonstration">显示间断点</span>
    <el-slider
      v-model="value2"
      :step="10"
      show-stops>
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 0
      }
    }
  }
</script>

	**带有输入框**---设置show-input属性会在右侧显示一个输入框

在这里插入图片描述

<template>
  <div class="block">
    <el-slider
      v-model="value"
      show-input>
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0
      }
    }
  }
</script>

	**范围选择**---设置range即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值

在这里插入图片描述

<template>
  <div class="block">
    <el-slider
      v-model="value"
      range
      show-stops
      :max="10">
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [4, 8]
      }
    }
  }
</script>

	**竖向模式**----设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性。

在这里插入图片描述

<template>
  <div class="block">
    <el-slider
      v-model="value"
      vertical
      height="200px">
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0
      }
    }
  }
</script>

	**展示标记**-----设置 marks 属性可以展示标记

在这里插入图片描述

<template>
  <div class="block">
    <el-slider
      v-model="value"
      range
      :marks="marks">
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [30, 60],
        marks: {
          0: '0°C',
          8: '8°C',
          37: '37°C',
          50: {
            style: {
              color: '#1989FA'
            },
            label: this.$createElement('strong', '50%')
          }
        }
      }
    }
  }
</script>

Attributes

在这里插入图片描述
在这里插入图片描述

Events

在这里插入图片描述
（9）TimePicker 时间选择器
固定时间点----使用 el-time-select 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长
在这里插入图片描述

<el-time-select
  v-model="value"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="选择时间">
</el-time-select>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  }
</script>

	**任意时间点**、------使用 el-time-picker 标签，通过selectableRange限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。

在这里插入图片描述

<template>
  <el-time-picker
    v-model="value1"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }"
    placeholder="任意时间点">
  </el-time-picker>
  <el-time-picker
    arrow-control
    v-model="value2"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }"
    placeholder="任意时间点">
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value1: new Date(2016, 9, 10, 18, 40),
        value2: new Date(2016, 9, 10, 18, 40)
      };
    }
  }
</script>

	**固定时间范围**

在这里插入图片描述

<template>
  <el-time-select
    placeholder="起始时间"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </el-time-select>
  <el-time-select
    placeholder="结束时间"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>

	**任意时间范围**-----添加is-range属性即可选择时间范围，同样支持arrow-control属性。

在这里插入图片描述

<template>
  <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
  <el-time-picker
    is-range
    arrow-control
    v-model="value2"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      };
    }
  }
</script>

Attributes

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（10）DatePicker 日期选择器
选择日-----基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数
在这里插入图片描述

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };
</script>

	**其他日期单位**

在这里插入图片描述

<div class="container">
  <div class="block">
    <span class="demonstration">周</span>
    <el-date-picker
      v-model="value1"
      type="week"
      format="yyyy 第 WW 周"
      placeholder="选择周">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">月</span>
    <el-date-picker
      v-model="value2"
      type="month"
      placeholder="选择月">
    </el-date-picker>
  </div>
</div>
<div class="container">
  <div class="block">
    <span class="demonstration">年</span>
    <el-date-picker
      v-model="value3"
      type="year"
      placeholder="选择年">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">多个日期</span>
    <el-date-picker
      type="dates"
      v-model="value4"
      placeholder="选择一个或多个日期">
    </el-date-picker>
  </div>
</div>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: ''
      };
    }
  };
</script>

	**选择日期范围**----在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。

最低0.47元/天 解锁文章
倚窗听梦~~~
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-form-render:基于Vue 3.x，使用JSON模式快速生成自定义表单配置界面
05-06
Vue形式呈现 基于Vue 3.x，使用JSON Schema快速生成自定义表单配置界面。 例子 安装 npm i vue3-form-render --save vue3 form render依赖于从item.so进行渲染，因此在使用vue3 form render我们需要安装Ant Design of Vue并将其导入到我们的项目中： import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue' ; import 'ant-design-vue/dist/antd.css' ; const app = createApp ( App ) ; app . use ( Antd ) ; app . mount ( '#app' ) ; 简易演示 < temp
el-switch 样式自定义
string佳佳的博客
12-21 1835
1、效果图 2、实现方法 <el-switch v-model="scope.row.showIndex" :active-value="1" :inactive-value="0" /> /deep/.el-switch{ height: 30px; line-height: 30px; } /deep/.el-switch__core{ wi
element-plus中使用el-switch时，用‘0，1’或者0,1来代替true，false绑定
最新发布
Shivy_的博客
04-30 865
element-plus中使用el-switch时，用‘0，1’或者0,1来代替true，false绑定
Form-switch开关
hrbsfdxzhq01的博客
01-05 1009
&lt;!--绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。--&gt; &lt;el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"&gt; &lt;/el-switch&gt; &lt
Element-UI整理（二）：表单
喜狼狼与灰太杨的博客
08-12 1994
目录 Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框 Form 表单 内容 Radio Radio Attributes： 参数 说明 类型 可选
vue element-ui列表中el-switch 开关
冰冰酱
03-12 4371
一.需求说明 1、根据后台传值动态显示开关（0为关，1为开） 2、对开关进行操作时请求后台，需要传两个参数：ID，State 二.需求描述 在列表的每一条添加一个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前一条数据 三.期望结果 已读和未读是后端返回给我的状态，分别是1和2，我先点击switch发送给后端这条数据的id，然后修改这一条数据的状态，而不是重新拿这个列表，如果后端返回失败的情况这个switch不做改变 四.解决方法 1.表格中组件
element表格中如何使用switch开关实现整体控制？
热门推荐
Shids_的博客
12-13 1万+
element表格中如何使用switch开关实现整体控制？（整体控制，只有一个为true，其余都是false）
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-UI 使用手册文档 V2.4.6 （Vue版本）.pdf
11-18
Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框 Form 表单 Data 数据组件 Table ...
vxe-table::dolphin: vxe-table vue 表格解决方案
05-11
一个基于的PC端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等... 设计理念 面向现代...
proForm高级组件ppt
08-07
`proForm`支持多种内置的表单元素，如`Cascader`（级联选择器）、`Checkbox`（复选框）、`Date`（日期选择器）、`Input`（文本输入框）、`InputNumber`（数字输入框）、`InputAutoComplete`（自动完成输入框）、`...
vue数据双向绑定的注意点
01-21
最近一个vue和element的项目中遇到了一个问题： 动态生成的对象进行双向绑定是失败 直接贴代码： 表单分类名称 prop=NAME label-width=formLabelWidth> <el v-model=addClass.NAME auto-complete=off> <...
Form表单类组件与Map地图组件
weixin_34418883的博客
11-27 284
form之switch组件 switch组件是一个开关选择器，wxml示例代码如下： <view class='container'> <view class='switch_text'>switch</view> <switch name='switch1' checked='true' /> ...
vue + element：table 结合 form 实现动态新增、编辑表格，并且校验
weixin_43299180的博客
08-11 4023
根据场景不一样，可以区分为整体校验和逐条校验；
Form表单以及各种信息框(文本框，密码框，单选/复选框，下拉列表框)
qq_46343373的博客
08-16 2776
表单的使用 <form action="信息最后提交到的地方" method="get或者post"> <!-- 中间可以写入各种信息框--> </from> 使用案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body>
ElementUI 的组件 Switch（开关）如何让文字显示在按钮上
无解的菜鸟晖 的博客
11-02 6552
1、引入相对应的组件 定义组件所属类 tableScopeSwitch ，为后面样式指定做准备，设置开关的值和对应展示的文字（开为1，并展示启用；关为0，并展示禁用），v-model 与后端数据库数据进行绑定，指定改变触发事件 handleStatusChange 函数。 2、设定 CSS 样式来实现文字显示在按钮上
element表格+表单+表单验证结合运用
qq_50276105的博客
08-04 2318
点击添加按钮，首先验证表单，如果存在没填的就验证提醒，都填了就向下添加一行表单表格；table中放form表单，放输入框或下拉框或多选框等；点击当前行删除按钮，清除行。
在输入框后面提示错误_交互细节研究：错误信息提示在表单中的最佳位置
weixin_40002846的博客
12-03 686
最常见的错误信息提示放置位置是表单的上方或内部，那么哪个位置对用户来说体验更好呢？在你的表单设计中，你会把错误信息提示放在哪个位置呢？如果它们不符合用户预期，就可能成为用户体验上的障碍。试想，当用户输入错误的信息时，他们首先需要理解错误是什么，然后才是修正错误、重新提交表单。但如果这个过程太费劲，他们可能就会选择放弃继续填写。表单上方的有效性 VS 内部的有效性最常见的错误信息提示放置位置是表单的...
elementui 表单嵌套表格，并且验证表格中的文本框
JJ_Smilewang的博客
02-10 2834
最近遇到一个需求，可以动态添加、修改、删除表格，并且添加时要对文本框进行验证，这也算是常规需求，故整理记录，供人参考。
el-cascader-panel
12-15
el-cascader-panel是一个基于Element UI的级联选择器组件，它可以让用户通过多个层级的面板来选择数据。在引用中提到，el-cascader-panel增加了全选按钮，并覆写了级联面板宽度。在引用中提到，可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值