注:开发环境vue2,ant版本1.7.8

需要先了解表头和内容自定义插槽

链接地址icon-default.png?t=M666https://blog.csdn.net/weixin_41620505/article/details/125886643

需求:动态添加item并校验输入框

 

 1、script中创建表头

  <script>
  export default {
  data() {
      return {
        // 表单参数
        form: {
          modelName: '',
          modelNote: '',
          editList: [{
            value1: 0,
            value2: 10,
            level: '',
            note: '',
            market: ''
          }]
        },
        rules: {
          modelName: Validate.requiredRules('名称', ['change', 'blur']),
          modelNote: Validate.requiredRules('说明', ['change', 'blur']),
          level: [...Validate.requiredRules('等级', ['change', 'blur']),
            {
              validator: (rule, value, callback) => {
                let findItem = this.form.editList.filter(item => item.level === value)
                if (findItem.length > 1) {
                  callback(new Error('等级重复'))
                } else {
                  callback()
                }
              }, trigger: ['change', 'blur']
            }],
        },
         columns: [
          { 
            dataIndex: 'value',
            slots: { title: 'titleValue' },//表头插槽
            scopedSlots: { customRender: 'value' },//表格内容插槽
            align: 'center',
            width: 240,
          {
            dataIndex: 'level',
            scopedSlots: { customRender: 'level' },
            slots: { title: 'titleLevel' },
            align: 'center'
          },
          {
            dataIndex: 'note',
            scopedSlots: { customRender: 'note' },
            slots: { title: 'titleNote' },
            align: 'center'
          },
          {
            title: '备注',
            dataIndex: 'market',
            scopedSlots: { customRender: 'market' },
            align: 'center'
          },
          {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
            align: 'center',
            width: 50
          }
     ]
   }
  }
 }
 
    </script>   

 2、在template中引用

<template>
  <div>
   <a-form-model
        :colon="false"
        class="form"
        ref="form"
        :model="form"
        :rules="rules"
      >
      <a-table
              :rowKey="
      (record, index) => {
        return index
      }"
              :columns="columns"
              :data-source="form.editList"
              :pagination="false">
<!-- 自定义表头-->
   <span slot="titleValue" class="form-table-heard">
         分值区间
      </span>
              <span slot="titleLevel" class="form-table-heard">
         评价等级
      </span>
             <span slot="titleNote" class="form-table-heard">
         评价说明
      </span>
<!--自定义内容-->

        <span slot="value" slot-scope="text, record,index">
                     <a-form-model-item class="item" :prop="'editList.'+index+'.value1'" :rules="rules.value1">
                                <a-input-number class="item" v-model="record.value1" size="small" :max="100" :min="0"
                                                :formatter="value => `${Number.parseInt(value||0).toFixed(0)}`"
                                />
                              </a-form-model-item>
                     <span class="item-line"/>
                        <a-form-model-item class="item" :prop="'editList.'+index+'.value2'"
                                           :rules="rules.value2">
                                <a-input-number class="item" :max="100" :min="0" v-model="record.value2" size="small"
                                                :formatter="value => `${Number.parseInt(value||0).toFixed(0)}`"
                                />
                     </a-form-model-item>
                       </span>
              <template slot="level" slot-scope="text, record,index">
                <a-form-model-item :prop="'editList.'+index+'.level'" :rules="rules.level">
                  <a-input v-model="record.level" placeholder="请输入" :disabled="disabled" size="small"/>
                </a-form-model-item>
              </template>
              <template slot="note" slot-scope="text, record,index">
                <a-form-model-item :prop="'editList.'+index+'.note'" :rules="rules.note">
                  <a-input v-model="record.note" placeholder="请输入" :disabled="disabled" size="small"/>
                 </a-form-model-item>
              </template>
              <template slot="market" slot-scope="text, record,index">
                <a-form-model-item>
                  <a-input v-model="record.market" placeholder="请输入" :disabled="disabled" size="small"/>
                </a-form-model-item>
              </template>


          <span slot="operation" slot-scope="text, record,index">
            <a-button name="删除" btnType="primary" :isDanger="true" 
                  @click="handleDelete(index)"/>
                       
             </span>
   </a-table>
 
      </a-form-model>
  </div>
</template>
<style lang="less" scoped>
 .form-table-heard:before {
      content: '*';
      color: red;
    }
 
</style>

 

Logo

前往低代码交流专区

更多推荐