vue+elemetn-ui，该如何对弹出框中的下拉框进行必填项rule设置

vue+elemetn-ui，该如何对弹出框中的下拉框进行必填项rule设置？

页面展示

img

img

代码展示

img

img

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
  <el-form-item lable="多选下拉框" prop="value">
    <el-select v-model="ruleForm.value" multiple placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
         :value="item.value">
      </el-option>
    </el-select>
  </el-form-itme>
</el-form>


<script>
export default {
  data(){
    return{
      ruleForm:{
        value:[]
      },
      rules:{
        value:[{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  }
}
</script>

这个是官网写法，你代码这个多选框用的应该是封装好的组件吧，那个绑定值要在form对象里，prop要对应好绑定的值名称，缺一不可，你参考一下，要有:model="form名称"，定义一下绑定值，可以把组件:value的值换成form名称.绑定值名称，prop="绑定值名称"，这样试一下

https://element.eleme.cn/#/zh-CN/component/form
表单验证那一项里面有示例

  • 这篇文章：vue+elemen ui实现左侧导航栏，右侧内容变化 也许有你想要的答案，你可以看看
  • 除此之外, 这篇博客: 通过vue实现elemen-ui中的表格的模糊搜索中的 三.代码实现 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  •    <el-table
          :data="tableData"  -------需要进行渲染的数据数组
          border
          style="width:100%;margin:0 auto;margin-top:20px;">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>

    vuejs部分

     data () {
    return {
      msg: '',
      search:'',
      datas:[         ---------对渲染数据的数组数据做出限制的data中的数据数组
        {
          date: '2016-05-02',
          name: '王辉',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '李云',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '赵虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '钱小龙',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },

    计算属性部分(通过对data中的数据进行对渲染数据进行限制)
    ——用于计算在template模板中的变量，该变量一般为插值表达式中的变量
    ——通过在computed中对该变量进行操作和计算，一般而言，操作的数据在data中，通过data中的数据来限制插值表达式中的变量
    ——优点：
    ——与watch功能差不多，可实现监控变量
    ——防止差值表达式中的复杂的逻辑堆叠
    ——且其计算属性拥有缓存功能，即只要data中的相关联的数据不发生改变，其computed中的计算的变量或者属性就不会再次调用或者刷新

      computed:{
    tableData(){
      const search=this.search;
      if(search){
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
       return this.datas.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              //Object.keys()---如果处理对象，将返回一个可进行枚举的属性数组，注意，是返回一个数组，是通过属性名组成的数组
              //Object.keys()---参数：要返回其枚举自身属性的对象；  返回值：一个表示给定对象的所有可枚举属性的字符串数组
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
      }
        return this.datas
      }
  }