el-table + el-form实现可编辑表格字段验证 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


el-table + el-form实现可编辑表格字段验证

2019-8-29 释然 前端及开发文章及欣赏


表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果
 
 
HTML:
<div class="table_box">
  <el-button type="primary" class="submit_btn" @click="addTable">添加</el-button> <!-- 如果不想展示错误提示信息,可以加上show-message参数 --> <el-form :model="productRuleForm" ref="productRuleForm" :rules="productRuleForm.rules" :show-message="false">
    <el-table
      :data="productRuleForm.tableData" border
      style="width: 100%">
      <el-table-column
        prop="date" label="日期" width="180">
        <template slot-scope="scope"> <!-- prop的规则: 在普通的form表单中是一个对象,prop是对象的属性. 表格是由多个对象组成的数组,在写prop是需要根据索引给值.这里的tableData就相当于对象的属性 !-->
        <!-- rules也要单独给 --> <el-form-item :prop="'tableData。' + scope。$index + '。date'"
            :rules='productRuleForm。rules。date'>
            <el-date-picker
              v-model="scope.row.date" value-format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.name'" :rules='productRuleForm.rules.name'>
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone" label="电话">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.phone'" :rules='productRuleForm.rules.phone'>
            <el-input v-model="scope.row.phone"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="address" label="地址">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.address'" :rules='productRuleForm.rules.address'>
            <el-input v-model="scope.row.address"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <el-button type="primary" class="submit_btn" @click="submit">提交</el-button>
</div>

 


		

 

js:

data () { return {
      productRuleForm: {
        tableData: [{
          date: '',
          name: '',
          phone: '',
          address: '' }],
        rules: {
          date: [{ required: true, message: '请选择日期', trigger: 'change' }],
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
          address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
        }
      }
    }
  },
 methods: { // 添加一行  addTable () { this。productRuleForm。tableData。push({
        date: '',
        name: '',
        phone: '',
        address: '' })
    }, // 提交数据  submit () { this.$refs['productRuleForm'].validate((valid) => { if (valid) {

        }
      })
    } 
			

}

蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标签: + el-table 帝皇彩票官网el-form实现可编辑表格字段验证 « 如何写出清晰易懂的交互文档? | 原型该画到什么程度?»


蓝蓝 http://www.bjhbys.com

  1. 帝皇彩票官网2019年8月(63)
  2. 2019年7月(61)
  3. 2019年6月(59)
  4. 2019年5月(32)
  5. 2019年4月(37)
  6. 2019年3月(43)
  7. 2019年2月(26)
  8. 2019年1月(45)
  9. 2018年12月(41)
  10. 帝皇彩票官网2018年11月(40)
  11. 2018年10月(29)
  12. 2018年9月(40)
  13. 2018年8月(87)
  14. 2018年7月(107)
  15. 2018年6月(86)
  16. 帝皇彩票官网2018年5月(110)
  17. 2018年4月(40)
  18. 2018年3月(35)
  19. 2017年8月(35)
  20. 帝皇彩票官网2017年7月(45)
  21. 2017年6月(7)
  22. 2017年5月(27)
  23. 2017年4月(51)
  24. 2017年3月(70)
  25. 2017年2月(65)
  26. 2017年1月(69)
  27. 2016年12月(55)
  28. 2016年11月(111)
  29. 2016年10月(92)
  30. 2016年9月(53)
  31. 2016年8月(9)
  32. 2016年7月(4)
  33. 2016年6月(9)
  34. 2016年3月(19)
  35. 帝皇彩票官网2016年2月(26)
  36. 2016年1月(30)
  37. 2015年12月(33)
  38. 2015年11月(35)
  39. 2015年10月(46)
  40. 帝皇彩票官网2015年9月(43)
  41. 2015年8月(40)
  42. 2015年7月(33)
  43. 2015年6月(46)
  44. 2015年5月(58)
  45. 2015年4月(70)
  46. 2015年3月(55)
  47. 帝皇彩票官网2015年2月(17)
  48. 帝皇彩票官网2015年1月(33)
  49. 帝皇彩票官网2014年12月(21)
  50. 2014年11月(84)
  51. 2014年10月(94)
  52. 2014年9月(6)
  53. 2014年8月(1)
  54. 2014年7月(13)
  55. 2014年6月(66)
  56. 2014年5月(99)
  57. 帝皇彩票官网2014年4月(88)
  58. 帝皇彩票官网2014年3月(102)
  59. 2014年2月(68)
  60. 2014年1月(83)
  61. 2013年12月(106)
  62. 2013年11月(112)
  63. 2013年10月(61)
  64. 2013年9月(20)
  65. 帝皇彩票官网2013年7月(13)
  66. 2013年6月(27)
  67. 2013年5月(48)
  68. 2013年4月(39)
  69. 2013年3月(8)
  70. 2013年2月(20)
  71. 2013年1月(31)
  72. 帝皇彩票官网2012年12月(33)
  73. 2012年11月(31)
  74. 2012年10月(23)
  75. 2012年9月(8)
  76. 2012年7月(14)
  77. 2012年6月(15)
  78. 2012年5月(31)
  79. 2012年4月(24)
  80. 2012年2月(4)
  81. 2012年1月(8)
  82. 2011年12月(35)
  83. 2011年11月(32)
  84. 2011年10月(13)
  85. 2011年8月(1)
  86. 2011年6月(1)
订阅Rss
大象彩票计划 迪士尼彩乐园网址 博发彩票开户 迪士尼彩乐园投注 吉利彩票开户 博发彩票登陆 大象彩票APP 迪士尼彩乐园官方网址 吉利彩票登陆 状元彩票计划