element-ui 开发备忘

目录

  • 购物清单的数据结构说明
  • 1. <el-radio> 的 label 属性
  • 2. 在 <el-table> 中放入表单组件
  • 3. 表单验证时填写正确的 prop 属性
  • 总结
  • 附：极简购物清单的完整代码

本文针对本人这两天进行界面开发的过程中遇到的一些坑点和要点进行记录，留待日后备忘。

本篇博客将用一个极简的购物清单的例子讲解，例子的完整代码可见最后。

购物清单的数据结构说明

shoppingList: {
    supermarket: '',        // 超市名称，非空，字符串
    status: true,           // 状态位，默认为 true
    items: [                // 购物清单项，0 到多个
        {
            name: '',       // 商品名，非空，字符串
            quantity: 0     // 数量，非空，整数
        }
    ]
}

了解了购物清单的数据结构之后，就可以开始讲解了。

1. <el-radio> 的 label 属性

根据官方文档，label 属性可以为 String、Number 或 Boolean，但官方文档中没有说明的是，如果要给 label 属性设置 Number 或 Boolean 值，则需要加上冒号变成 :label，不然像 "0"、"true" 这类的值会被当作 String 处理。

<!--
  感兴趣的可以试着去掉 label 前的冒号，
  你会发现在页面中没有一个 radio 处于选中状态，
  提交表单的时候对应的 status 会变成 String 而非 Boolean
  -->
<el-form-item prop="status" label="状态">
  <el-radio v-model="shoppingList.status" :label="true">启用</el-radio>
  <el-radio v-model="shoppingList.status" :label="false">禁用</el-radio>
</el-form-item>

2. 在 <el-table> 中放入表单组件

从购物清单的数据结构可以看出，清单项部分是可变的，在 element-ui 里不难解决，官方文档中提到过动态增减表单项。但出于项目的需要，我们希望清单项能够像表格那样编辑，于是自然就有了在表格中嵌入表单组件的做法。官方文档中有一个自定义列模板可以用来做这个。在本例中，代码如下：

<el-table :data="shoppingList.items">
  <el-table-column type="index"></el-table-column>
  <el-table-column label="商品名">
    <template slot-scope="scope">
      <el-form-item :prop="'items.' + scope.$index + '.name'"
                    :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]">
        <el-input v-model="scope.row.name"></el-input>
      </el-form-item>
    </template>
  </el-table-column>
  <el-table-column label="数量">
    <template slot-scope="scope">
      <el-form-item :prop="'items.' + scope.$index + '.quantity'"
                    :rules="[{ required: true, message: '请输入商品数量' }, { type: 'number', message: '只能输入数字' }]">
        <el-input v-model="scope.row.quantity"></el-input>
      </el-form-item>
    </template>
  </el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeItem(scope.$index)"></el-button>
    </template>
  </el-table-column>
</el-table>

至于表单数据的绑定，在 <el-table-column> 的 <template> 元素中可以定义一个 slot-scope 属性（这里，该属性被定义为 "scope"）。经过这样的设置之后，就可以通过 scope.$index 得到该行的索引，通过 scope.row 获得该行的元素，表单数据绑定就比较容易了。至于添加和删除表单项，就通过对 shoppingList.items 进行 push 和 splice 来实现（参见完整代码）。

3. 表单验证时填写正确的 prop 属性

在官方文档中，表单验证既可以在 Form 上传递所有的 rules，也可以在单个表单域上传递验证规则。但在动态增减的表单项中进行验证，需要十分注意设置正确的 prop 属性。既然时动态增减的表单项，那么这个 prop 应该也是动态的，于是我们使用 v-bind 指令（简写为 :）进行绑定，以下是一个例子：

<el-table-column label="商品名">
  <template slot-scope="scope">
    <el-form-item :prop="'items.' + scope.$index + '.name'"
                  :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]">
      <el-input v-model="scope.row.name"></el-input>
    </el-form-item>
  </template>
</el-table-column>

上一节中我们知道 scope.$index 可以访问到该行数据对应的索引，于是就可以通过 :prop="‘items.‘ + $index + ‘.name‘" 进行绑定。注意这里不能写 :prop="scope.row.name"，也不能省略冒号——前者会导致验证规则不起作用，后者会在运行中给出警告，要求填写正确的 prop 值。至于为什么一定要这种写法，个人认为可以类比到 Java 中遍历数组元素的两种方式

// 方式一
for (int i = 0; i < items.length; i++) {
    // 遍历操作
}
// 方式二
for (Item item : items) {
    // 遍历操作
}

对于方式二来说，item 在遍历过程中是会变化的，无法通过它唯一确定一条记录，而下标可以。对于动态增减的表单项，肯定要把一个验证规则应用到所有表单项，同时又要区分哪个项验证通过，哪个项验证不通过，在这种要求下，自然用下标定位成为了不二之选。

总结

以上为我在这两天的页面开发中遇到的一些坑点和要点，有任何问题或者其它需要商讨的点可以在评论区留言。

附：极简购物清单的完整代码

<template>
  <div id="app">
    <h2>A simple shopping list.</h2>
    <el-form :model="shoppingList" label-width="100px" size="mini">
      <el-form-item prop="supermarket" label="超市"
                    :rules="[{ required: true, message: '请输入超市名称', trigger: 'blur' }]">
        <el-input v-model="shoppingList.supermarket"></el-input>
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-radio v-model="shoppingList.status" :label="true">启用</el-radio>
        <el-radio v-model="shoppingList.status" :label="false">禁用</el-radio>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item prop="items" label="购物清单">
        <el-button type="text" icon="el-icon-plus" @click="addItem">添加</el-button>
        <el-table :data="shoppingList.items">
          <el-table-column type="index"></el-table-column>
          <el-table-column label="商品名">
            <template slot-scope="scope">
              <el-form-item :prop="'items.' + scope.$index + '.name'"
                            :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]">
                <el-input v-model="scope.row.name"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <el-form-item :prop="'items.' + scope.$index + '.quantity'"
                            :rules="[{ required: true, message: '请输入商品数量' }, { type: 'number', message: '只能输入数字' }]">
                <el-input v-model="scope.row.quantity"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeItem(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-button type="primary" @click="saveList">Submit!</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      shoppingList: {
        supermarket: '',
        status: true,
        items: [
          {
            name: '',
            quantity: 0
          }
        ]
      }
    }
  },
  methods: {
    addItem () {
      this.shoppingList.items.push({ name: '', quantity: 0 })
    },
    removeItem (index) {
      this.shoppingList.items.splice(index, 1)
    },
    saveList () {
      console.log('购物列表为：' + JSON.stringify(this.shoppingList))
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

原文地址：https://www.cnblogs.com/Downstream-1998/p/11386288.html

时间： 2024-10-10 05:14:25

element-ui 开发备忘的相关文章

移动端开发备忘

这是一些移动端开发的备忘记录. <meta> 元素 <meta name=“viewport” content=“width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/> width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素) height:高度(数值 / device-height)(范围从223 到10,000) initial-s

基于Prism.Windows的UWP开发备忘

以前做UWP开发都是使用MvvmLight,主要是简单易上手,同时也写了很多MvvmLight的开发系列文章: UWP开发必备以及常用知识点总结 UWP开发之Mvvmlight实践九:基于MVVM的项目架构分享 UWP开发之Mvvmlight实践八:为什么事件注销处理要写在OnNavigatingFrom中 UWP开发之Mvvmlight实践七:如何查找设备(Mobile模拟器.实体手机.PC)中应用的Log等文件 UWP开发之Mvvmlight实践六:MissingMetadataExcept

移动端web app开发备忘

最近要做个手机html5的页面,做些知识储备,重要的点记录下来以备后续. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例.css中的px可以看作是设备的独立象素,通过devicePixelRatio,就可以知道设备上的一个css像素代表着多少个物理像素,可以考虑devicePixelRatio+rem进行不同设备间的适配: 2.利用Image对象实现图片的懒加载,主要逻辑代码如下: var len = queue.length; var counter = 0; fo

微信公众号支付开发备忘

1,首先,你得有一个通过备案的域名,然后一个服务器,然后把你开发好的代码,放到该域名的服务器下; 2,然后登陆微信公众平台, https://mp.weixin.qq.com/ 然后点击: 然后如果这个已经启用,先把他停用: (这里面,稍微说一下,这个要验证通过,必须自己写一个页面,这里面用到的out.aspx,代码的话,前台为空,然后后台代码如下: Response.Write(this.Request.QueryString["echostr"]. Response.End();

支付宝扫码支付开发备忘

1.首先当然得注册有支付宝账号,最好是企业支付宝账号 2.进入支付宝开放平台的开发者中心:https://openhome.alipay.com/platform/developerIndex.htm 申请应用 3.申请应用之后,设置好应用图标.需要添加的功能为当面付和第三方应用授权,这个后续需要签约,否则调用接口会提示权限不够 4.设置应用网关 也就是支付成功之后的后台通知地址 5.设置应用公钥,这个非常重要,选择RSA2(SHA256)密钥(推荐),下载支付宝提供的RSA签名验签工具:htt

微信小程序开发备忘

前言 从去年一月份微信宣告要做小程序时的圈子里已经有了局部躁动,去年九月内测时,更是全民热捧,似乎张晓龙和他的微信已经准备好再一次改变世界.还好微信比它的粉丝们要理智的多,不做分发,不搞渠道,不发"红利",所以,昨天正式发布时,也并没有想象中的所有人一起迎接新世界到来的景象.OSC上有人发帖问"微信小程序就要发布了,大家激动吗",底下居然都已经有人开喷了.. 但是,话说回来,从技术角度看,微信为我们提供了基于微信本身的新应用场景下的新技术,那么作为一个开发者,对他有

Excel 开发备忘

1.装完读取插件才可以对EXCEL读取 Excel 2010 读取数据插件 https://www.microsoft.com/zh-CN/download/details.aspx?id=13255 2.ExcelHelper,需要引用Excel COM组件 using System;using System.IO;using System.Data;using System.Collections;using System.Data.OleDb; namespace ViewBoard{//

Eecel 开发备忘

1.装完读取插件才可以对EXCEL读取 Excel 2010 读取数据插件 https://www.microsoft.com/zh-CN/download/details.aspx?id=13255 2.ExcelHelper,需要引用Excel COM组件 using System;using System.IO;using System.Data;using System.Collections;using System.Data.OleDb; namespace ViewBoard{ /

Xamarin移动开发备忘

vs2017下: 1.debug用于本地生成和调试,release用于发布.区别主要在于: 安卓项目的生成选项属性中,开发者模式release是不勾的,而且高级里的cpu不同(debug是x86,release是真实手机cpu) 2.发布:存档.分发,随便新建个签名就OK. 3.界面所做的修改,必须重构(生成?)后才能在cs代码里使用,比如“x:name”属性. to be continued.... 原文地址:https://www.cnblogs.com/wanjinliu/p/120786