# 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> |
