单元格编辑功能,如何修改v-if绑定的条件,实现只有某几个字段可编辑。?

作者站长头像
站长
· 阅读数 4
<el-table
          :data="
            this.tableData.slice(
              (this.currentPage - 1) * this.pagesize,
              this.currentPage * this.pagesize
            )
          "
          border
          fit
          height="500px"
          highlight-current-row
          style="width: 100%"
          @cell-dblclick="cellDblclick"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            v-for="(item, i) in cols"
            :key="i"
            align="center"
            :prop="item.prop"
            :label="item.label"
          >
            <template slot-scope="{ row,column }">
              <el-input
                v-if="cellDoubleClice&&row.row_index===cellRowIndex&&column.label===cellLabel"
                v-model="row[item.prop]"
                ref="input"
              ></el-input>
              <span v-else>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
cellDoubleClice: false,
      cellRowIndex: null,
      cellLabel:''
 // 遍历出所有表格行的回调函数
    tableRowClassName({ row, rowIndex }) {
      // 给row添加索引
      row.row_index = rowIndex;
    },
    // 双击事件触发的函数
    cellDblclick(row, column, cell, event) 
      this.cellDoubleClice = event.bubbles;
      // 用列字段名称作为列的唯一标识
      this.cellLabel=column.label
      // 获取点击单元格的行索引
      this.cellRowIndex = row.row_index;
    },

如何修改v-if绑定的条件,实现只有某几个字段可编辑。

回复
1个回答
avatar
test
2024-06-25

多重判断条件,可以在与号后添加括号里面写或条件

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容