想要的样子
大家不要在意内容名称是否能对上的了,就是个例子,使用的话,model还需要改一下哈😘
<el-form-item label="测评量表:">
<el-button type="primary" icon="el-icon-plus" size="mini">添加量表</el-button>
<el-table :data="tableData" border style="width: 80%" size="small">
<el-table-column align="center" header-align="center" type="index" label="序号" width="60"> </el-table-column>
<el-table-column align="center" header-align="center" prop="name" label="名称" width="200"> </el-table-column>
<el-table-column align="center" header-align="center" prop="name" label="题量"></el-table-column>
<el-table-column align="center" header-align="center" prop="address" label="预计用时"> </el-table-column>
<el-table-column align="center" header-align="center" label="操作">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'up')" type="text" size="small"> 上移 </el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'down')" type="text" size="small"> 下移 </el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'del')" type="text" size="small" class="dangerBtn"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
js代码
export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1520 弄'
}]
}
},
methods: {
deleteRow (index, e, type) {
if (type === 'up') {
if (index === 0) {
return
}
// 在上一项插入该项
this.tableData.splice(index - 1, 0, (this.tableData[index]))
// 删除后一项
this.tableData.splice(index + 1, 1)
} else if (type === 'down') {
if (index === (this.tableData.length - 1)) {
return
}
// 在下一项插入该项
this.tableData.splice(index + 2, 0, (this.tableData[index]))
// 删除前一项
this.tableData.splice(index, 1)
} else if (type === 'del') {
this.tableData.splice(index, 1)
}
}
}
}
比心♥️❤️❤️