antd vue 表格结合表单验证

Perferson

已于 2022-02-15 17:35:04 修改

阅读量1.2k

点赞数 2

于 2022-02-15 17:17:55 首次发布

本文链接：https://blog.csdn.net/nongmai6494/article/details/122948834

版权

Ant Design Vue 表格组件表单验证 Vue.js 动态验证

关键词由CSDN通过智能技术生成

<a-form-model ref="tableform" :model="form">
          <a-table
            size="small"
            :columns="columns"
            :data-source="form.tableData"
            :row-key="(record) => record.id"
            :pagination="false"
            :loading="loading"
            >
            <!-- <template slot="bigName" slot-scope="text">
                  {{getBigProductName(text)}}
            </template> -->
              <template slot="price" slot-scope="text, record,index">
                <a-form-model-item :prop="'tableData.'+index+'.price'" :rules="rules.price">
                   <a-input prefix="￥" suffix="元/笔" v-model="record.price" class="price"/>
                </a-form-model-item>   
              </template>
          </a-table>
        </a-form-model>
        <a-button type="primary" class="save-btn" @click="handleSubmit">保存</a-button>
     

<script>
import { columns } from './constant'
export default {
  data() {
    return {
      columns,
      loading: false,
      
      bigProductOptions: [],
      form:{
        tableData: 
        [
            {id:1,bigName:'测试大类',name:'产品名称',edition:'1.0',price:'',createTime:'记录编辑时间'},
            {id:2,bigName:'测试大类2',name:'产品名称2',edition:'2.0',price:'',createTime:'记录编辑时间2'}
        ]
      },
      rules: {
        price: { required: true, message: '价格不能为空' }
      }
    }
  },
  mounted() {},
  methods: {
    handleSubmit () {
      this.$refs.tableform.validate(async valid => {
        if (valid) {
          this.$message.success('提交成功')
        }
      })
    },
  
  }
}
</script>