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

Question

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

发布于
2023-11-14 江苏

更新于
2023-11-15

<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绑定的条件，实现只有某几个字段可编辑。

前端 vue.js element-ui

阅读 767

AI BotBETA

要实现精准定位到当前点击的单元格，您可以使用 el-table 组件的 @row-click 事件。该事件会在用户点击某一行时触发，可以获取到点击的行的数据。

同时，为了实现只有后面四个字段可编辑，您可以在 el-table-column 中使用 v-if 判断语句，仅在需要编辑时显示 el-input 组件，否则显示 span。

以下是代码示例：

<el-table
  :data="tableData"
  border
  fit
  height="500px"
  highlight-current-row
  style="width: 100%"
  @row-click="handleRowClick"
>
  <el-table-column
    v-for="(item, i) in columns"
    :key="i"
    align="center"
    :prop="item.prop"
    :label="item.label"
  >
    <template slot-scope="{ row }">
      <el-input
        v-if="item.prop === 'field1' || item.prop === 'field2' || item.prop === 'field3' || item.prop === 'field4'"
        v-model="row[item.prop]"
        ref="input"
      ></el-input>
      <span v-else>{{ row[item.prop] }}</span>
    </template>
  </el-table-column>
</el-table>

在您的 Vue 实例中，添加以下方法：

data() {
  return {
    tableData: [...], //您的表格数据
    columns: [...], //您的表格列配置
  };
},
methods: {
  handleRowClick(row, column, cell, event) {
    console.log(event.bubbles);
    const { row_index } = row; //获取行索引
    // 在这里可以进行您需要的操作，例如将选中的行存储到另一个变量中，或者在编辑模式下进行其他操作。
  },
},

1 个回答

得票最新

请你学习

1162289

发布于
2023-11-15 江苏

✓ 已被采纳

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

撰写回答