vue form表单使用el-select、el-radio、el-checkbox

Baifu paste

已于 2022-08-01 14:52:36 修改

阅读量2.3k

点赞数 1

分类专栏： vue element 文章标签： vue.js javascript 前端

于 2022-07-26 17:12:23 首次发布

本文链接：https://blog.csdn.net/qq_28586135/article/details/125998798

版权

vue 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

element

21 篇文章 1 订阅

订阅专栏

1.form表单使用el-select下拉组件，应该注意options需要作为一个数组循环出来，在数据回显时就比较好处理。

<template>
  <div>
		<el-form
		  class="abow_dialog"
		  :model="ruleForm"
		  ref="ruleForm"
		  label-width="180px"
		>
      <el-form-item label="是否安装：" >
        <el-select 
            v-model="ruleForm.value" 
            @change="valueChange" 
            placeholder="请选择是否安装"
            style="width:100%;"
          >
            <el-option
              v-for="item in valueOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
          </el-option>
        </el-select>
      </el-form-item>
		</el-form>
	</div>
</template>
<script>
  export default {
    data(){
      return {
        ruleForm: {
          value: '',
        },
        valueOptions:[
          {
            label:'已安装',
            value:'0'
          },
          {
            label:'未安装',
            value:'1'
          },
        ],
      }
    },
    created(){
	  },
    mounted(){
    },
    methods: {
      valueChange(value){
        this.$nextTick(()=>{
          console.log(value)
        })
      },
	  },
  }
</script>

2.form表单使用el-radio单选组件，label是form表单绑定的值，而不是展示的参数。

<template>
  <div>
		<el-form
		  class="abow_dialog"
		  :model="ruleForm"
		  ref="ruleForm"
		  label-width="180px"
		>
      <el-form-item label="是否安装：" >
        <el-radio-group v-model="ruleForm.value" @change="valueChange">
          <el-radio  :label="0">已安装</el-radio>
          <el-radio  :label="1">未安装</el-radio>
        </el-radio-group>
      </el-form-item>
		</el-form>
	</div>
</template>
<script>
  export default {
    data(){
      return {
        ruleForm: {
          value: '',
        },
      }
    },
    created(){
	  },
    mounted(){
    },
    methods: {
      valueChange(value){
        this.$nextTick(()=>{
          console.log(value)
        })
      },
	  },
  }
</script>

3.form表单使用el-checkbox多选框组件，label是页面展示的值，name可以是form表单的值

<template>
  <div>
		<el-form
		  class="abow_dialog"
		  :model="ruleForm"
		  ref="ruleForm"
		  label-width="180px"
		>
      <el-form-item label="水果：" >
        <el-checkbox-group v-model="ruleForm.value" class="fl" style="width:150px">
          <el-checkbox label="苹果" name="apple" @change="valueChange1"></el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="ruleForm.value1" class="fl" style="width:150px">
          <el-checkbox label="香蕉" name="banana" @change="valueChange2"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
		</el-form>
	</div>
</template>
<script>
  export default {
    data(){
      return {
        ruleForm: {
          value: '',
          value1:'',
        },
      }
    },
    created(){
	  },
    mounted(){
    },
    methods: {
      valueChange1(value){
        this.$nextTick(()=>{
          console.log(value)
        })
      },
      valueChange2(value){
        this.$nextTick(()=>{
          console.log(value)
        })
      },
	  },
  }
</script>