输入框修改
<el-table-column prop="score" label="分值" > <template slot-scope="scope"> <el-input v-model="scope.row.score" :disabled="scope.row.editor"> </el-input> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" @click="modify(scope.row)">编辑</el-button> <el-button type="text" @click="save(scope.row)">保存</el-button> </template> </el-table-column>
data里面给每一个对象添加一个editor属性
timuguanli:[
{
timu:'111',
answer:'222',
level:'hard',
score:'',
editor:true,
},
{
timu:'111',
answer:'222',
level:'hard',
score:'',
editor:true,
}
]
按钮格式转化:点击添加转换为移除在点击变回原样(同上)
每个对象里面都包含一个start
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="insertShiJuan(scope.row)"
v-if="scope.row.start==true"
>添加</el-button
>
<el-button v-else
@click="removeShiJuan(scope.row)"
type="text"
size="small"
style="color:red"
>移除</el-button
>
</template>
</el-table-column>
//添加按钮和移除按钮转换
insertShiJuan(row){
console.log(row.start)
row.start=false;
},
removeShiJuan(row){
row.start=true;
},