Cuando se hace clic en el botón de edición de una determinada fila, la celda se convierte en un estado de entrada y, después de hacer clic en Guardar, se convierte en un estado de visualización puro.
El efecto es el siguiente:
paso:
(1) Las celdas editables y visualizables necesitan dos estados, uno está envuelto con una etiqueta de entrada y el otro está envuelto con una etiqueta de intervalo. Los dos están en un estado mutuamente excluyente. Vincule un valor a través de v-if para invertirlos y desplegado
<el-table-column
prop="videoName"
label="视频名称"
align="center"
width="250"
>
<template slot-scope="scope">
<!-- 编辑状态下显示 -->
<el-input
v-if="isshow[scope.$index]"
type="text"
size="mini"
clearable
v-model.trim="scope.row.videoName"
/>
<!-- 展示状态下显示 -->
<span v-if="!isshow[scope.$index]">{
{ scope.row.videoName }}</span>
</template>
</el-table-column>(2) También se necesitan dos botones de operación, un botón de edición y un botón de guardar. Los dos están en un estado mutuamente excluyente. Vincule un valor a través de v-if para que se inviertan y se muestren.
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-if="isshow[scope.$index]"
size="mini"
type="success"
icon="el-icon-check"
@click="handelCheck(scope.$index)"
/>
<el-button
v-if="!isshow[scope.$index]"
size="mini"
type="primary"
icon="el-icon-edit"
@click="handleEdit(scope.$index)"
/>
</template>
</el-table-column>(3) Cambie este valor a través del método this.$set, el valor inicial de isshow es una matriz vacía, que es una variable global
data() {
return {
// 控制参数表格输入显示
isshow: [],
}; methods: {
/**
* @description: 编辑单行数参数
* @param {index} 当前行索引值
* @return void
*/
handleEdit(index) {
this.$set(this.isshow, index, true);
},
/**
* @description: 保存单行参数
* @param {index} 当前行索引值
* @return void
*/
handelCheck(index) {
this.$set(this.isshow, index, false);
},
},