数组元素基础写法-增加、删除、置顶、上移、下移

js基础写法

// 增加
addItem: function () {
var n = this.signForm.signFormList ? this.signForm.signFormList.length + 1 : 1;
    this.signForm.signFormList.push({
      title: '标题' + n,
      require: false
    });
},

// 删除
removeItem: function (item) {
    const index = this.signForm.signFormList.indexOf(item);
    this.signForm.signFormList.splice(index, 1);
},

// 置顶
moveTop: function (item) {
    const index = this.signForm.signFormList.indexOf(item);
    if(index != 0){
      this.signForm.signFormList.splice(index,1);
      this.signForm.signFormList.splice(0,0,item);
    }
},

// 上移
moveUp: function (item) {
    const index = this.signForm.signFormList.indexOf(item);
    if(index != 0){
        this.signForm.signFormList.splice(index,1);
        this.signForm.signFormList.splice(index-1,0,item);
    }
},

// 下移
moveDown: function (item) {
    const index = this.signForm.signFormList.indexOf(item);
    const max = this.signForm.signFormList.length ;
    if(index != max){
      this.signForm.signFormList.splice(index,1);
      this.signForm.signFormList.splice(index+1,0,item);
    }
},

界面基础写法

<el-form-item label="设置报名表" prop="" class="setSign">

    <el-row :gutter="20" v-for="item of signForm.signFormList">
        <el-col :span="3">
              <el-checkbox class="checkbox" v-model="item.require">必填</el-checkbox>
        </el-col>
        <el-col :span="4" class="title">
            <el-input   v-model="item.title" size="large"></el-input>
        </el-col>
        <el-col :span="10">
              <el-input   :placeholder="'提示语:请输入您的'+item.title" size="large" readonly></el-input>
        </el-col>

        <el-button icon="delete" @click.native.prevent="removeItem(item)" title="删除"></el-button>

        <el-dropdown trigger="click"  style="margin-left: 10px;color: #20a0ff;">
          <el-button>
            移动<i class="el-icon-caret-bottom el-icon-right"></i>
          </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="moveTop(item)">置顶</el-dropdown-item>
              <el-dropdown-item @click.native="moveUp(item)">上移</el-dropdown-item>
              <el-dropdown-item @click.native="moveDown(item)">下移</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </el-row>

    <el-row>
        <el-col :span="14" :offset="5">
            <el-button :span="24" type="primary" size="large" @click.native="addItem">添加更多</el-button>
        </el-col>
    </el-row>
</el-form-item>