form内table内嵌input,支持做上下移动校验

<template>
  <div class="export-template-table">
    <el-table :data="form.tableData" v-if="disable" tooltip-effect="dark" border style="width: 700px;margin:0 auto">
      <el-table-column label="属性路径" prop="propertyRoute"/>
      <el-table-column label="属性显示名称" prop="propertyDisplayName"/>
      <el-table-column label="顺序" width="150" >
        <template slot-scope="scope">
          <span class="sort-num">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-else>
      <el-form :model="form" ref="tableForm">
        <el-table
          :data="form.tableData"
          tooltip-effect="dark"
          border
        >
          <el-table-column label="" prop="propertyRoute">
            <template slot="header" slot-scope="scope">
              <span class="red">*</span> 属性路径
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.propertyRoute`" :rules="rules.propertyRoute">
                <el-input
                  v-model.trim="scope.row.propertyRoute"
                  placeholder="请输入属性路径"
                  clearable
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="" prop="propertyDisplayName">
            <template slot="header" slot-scope="scope">
              <span class="red">*</span> 属性显示名称
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.propertyDisplayName`" :rules="rules.propertyDisplayName">
                <el-input
                  v-model.trim="scope.row.propertyDisplayName"
                  placeholder="请输入属性显示名称"
                  clearable
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="顺序" width="150" prop="index">
            <template slot-scope="scope">
              <span class="sort-num">{{ scope.$index + 1 }}</span>
              <i :class="['icon',scope.$index === 0 ? 'icon-up-disable' : 'icon-up']" @click="upMove(scope.$index)"/>
              <i :class="['icon', scope.$index + 1 === form.tableData.length ? 'icon-down-disable' : 'icon-down']" @click="downMove(scope.$index)"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <i class="icon-delete" @click="deleteList(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="operate-btn">
        <button class="primary-btn add-btn" @click="add">
          <span class="icon-add">新增</span>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'exportTemplate',
    props: {
      disable: {
        type: Boolean,
        default: true
      },
      form: {
        type: Object,
        default: () => {
         return {
           tableData: []
         }
        }
      }
    },
    data() {
      return {
        rules: {
          propertyRoute: [{ required: true, message: '属性路径不能为空', trigger: ['blur', 'change'] }],
          propertyDisplayName: [{ required: true, message: '属性显示名称不能为空', trigger: ['blur', 'change'] }]
        }
      }
    },
    methods: {
      // 删除操作
      deleteList(index) {
        this.form.tableData.splice(index, 1)
        console.log(index)
      },
      // 向上移动
      upMove(index) {
        if (index === 0) {
          return this.$message.warning('已经是第一个了')
        }
        // 将被删除的项设置为上一项的值
        this.form.tableData[index] = this.form.tableData.splice(index - 1, 1, this.form.tableData[index])[0]
      },
      // 向下移动
      downMove(index) {
        if (index === this.form.tableData.length - 1) {
          return this.$message.warning('已经是最后一个了')
        }
        this.form.tableData[index] = this.form.tableData.splice(index + 1, 1, this.form.tableData[index])[0]
      },
      add() {
        this.form.tableData.push({})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .red{color:red;}
  .export-template-table{
    /deep/ .el-table__empty-block{
      display: none;
    }
    .operate-btn {
      height: 73px;
      border: 1px solid #e1e2eb;
      border-top: none;
      line-height: 73px;
      text-align: center;
    }
    .add-btn {
      height: 32px;
      width: 80px;
      text-align: center;
      background: #fff;
      font-size: 14px;
      color: #215bff !important;
      border: 1px solid #4776fb;
      border-radius: 16px;
      cursor: pointer;
      .icon-add:before {
        content: "";
        vertical-align: top;
        background: url("../../assets/export/add.png") no-repeat;
        background-size: 100%;
        width: 24px;
        height: 24px;
        display: inline-block;
        position: relative;
        top: -3px;
      }
    }
    .sort-num {
      position: relative;
      top: -2px;
      margin-right: 10px;
    }
    .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
    }
    .icon-up {
      background: url("../../assets/export/up.png") no-repeat;
      cursor: pointer;
    }
    .icon-up-disable {
      background: url("../../assets/export/up_disable.png") no-repeat;
    }
    .icon-down {
      background: url("../../assets/export/down.png") no-repeat;
      cursor: pointer;
    }
    .icon-down-disable {
      background: url("../../assets/export/down_disable.png") no-repeat;
    }
    /deep/ .el-input__inner{
      font-size: 13px;
      height: 32px;
      line-height: 32px;
    }
  }
</style>