Vue (八) | 常用功能plug

文章已参与[新人创作礼]活动，一起开启掘金创作之路.

微信公众号：秀基宝。如有问题，请后台留言，反正我也不会听。

前言：我这边表格不用怪，和element类似，只是我们移植了一层皮而已，所以中新思路大家明白就行 功能清单：

1. 校验表单必填
2. 表格验证
3. 勾选el-table几条数据迁移到另一个el-table

1、校验表单必填

<el-form ref="threeForm" class="stepThreeDiv" :rules="threeFormRules" :inline="true" :model="searchForm">
	<el-form-item :label=" $t('wms.receipt.factoryCode') " prop="factoryCode" :rules="threeFormRules.factory" >
          <el-select v-model="searchForm.factoryCode" clearable filterable :placeholder="$t('common.select')" @focus="getFactoryName" >
            <el-option label="ALL" value="" />
            <el-option v-for="item in factoryCodes" :key="item.factoryCode" :label="item.factoryName"
              :value="item.factoryCode" />
          </el-select>
        </el-form-item>
</el-form>

// data数据源：
searchFormRules: {
        createUsers: [{ required: true, message: 'createUser不能为空', trigger: 'blur' }]
      }
// 事件
this.$refs.threeForm.validate(valid => {
        if (valid) {
          console.log('通过')
          console.log(this.form.tableData)
        }
      })

上面讲了表单，其实表格也一样

2、表格验证 前提：我这边qty这一列表格使用的是拥有编辑功能

<s-table ref="multipleVenMaterTable" border resizable show-overflow height="300" :data="venMaterData" :edit-rules="validRules" :edit-config="{trigger: 'dblclick', mode: 'row'}" @selection-change="handleSelectionVenMaterChange" >
            <s-table-column type="checkbox" width="60" />
            <s-table-column :label="$t('wms.receipt.materialNum')" field="materialNum" />
            <s-table-column :label="$t('wms.receipt.materialName')" field="materialName" />
            <s-table-column :label="$t('wms.receipt.unit')" field="unit" />
            <s-table-column :label="$t('wms.receipt.qty')" field="qty" :rules="threeFormRules.factory" :edit-render="{name: 'input'}"  />
          </s-table>

// data数据
validRules: {
        qty: [
          { required: true, message: '名称必须填写' }
        ]
      }
// 事件
threeVenMaterConmmit() {
	// 获取选中行数
      const selectRecords = this.$refs.multipleVenMaterTable.selection
      if (selectRecords.length > 0) {
        this.$refs.multipleVenMaterTable.validate(selectRecords, valid => {
          if (valid) {
            this.$XModal.message({ status: 'success', message: '校验成功！' })
          } else {
            this.$XModal.message({ status: 'error', message: '校验不通过！' })
          }
        })
      } else {
        this.$XModal.message({ status: 'warning', message: '未选中数据！' })
      }
    }

3、勾选el-table几条数据迁移到另一个el-table

<s-table
            ref="multipleVenMaterTable" border resizable show-overflow height="300" :data="venMaterData" :edit-config="{trigger: 'dblclick', mode: 'row'}" @selection-change="handleSelectionVenMaterChange" >
            <s-table-column type="checkbox" width="60" />
            <s-table-column :label="$t('wms.receipt.materialNum')" field="materialNum" />
            <s-table-column :label="$t('wms.receipt.unit')" field="unit" />
            <s-table-column :label="$t('wms.receipt.qty')" field="qty" :edit-render="{name: 'input'}" />
          </s-table>
<!-- 上面edit-config是我们自己的双击输入一个功能，大家忽视，这里有一个checkbox勾选 -->

data数据
enMatervalidRules: {
        qty: [
          { required: true, message: '可收数量必须填写', trigger: 'change' }
        ]
      }
方法
threeVenMaterConmmit() {
      const selectRecords = this.$refs.multipleVenMaterTable.selection
      this.$refs.multipleVenMaterTable.validate(selectRecords, valid => {
        if (valid) {
          this.$XModal.message({ status: 'success', message: '校验通过！' })
        } else {
          this.$XModal.message({ status: 'error', message: '校验不通过！' })
        }
      })
    }

本人开发的玩基金小工具

个人博客：
名称：纯洁的麦田
链接：[http://www.idearyou.cn/]
描述：争取哪一天做上架构师
公众号：纯洁的麦田

网址：[xiu.idearyou.cn]
谷歌插件搜：秀基宝
小程序：秀基宝
复制代码
复制代码
复制代码

后语

如果本文对你哪怕有一丁点帮助，请帮忙点好看。你的好看是我坚持写作的动力。 另外，关注免费学习。