在element的表格中添加编辑（input，输入框）

最新推荐文章于 2024-04-25 09:15:24 发布

一颗李子1231

最新推荐文章于 2024-04-25 09:15:24 发布

阅读量7.5k

点赞数 2

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_44732821/article/details/126267363

版权

效果如下所示：

1、在表格中添加单选框

在el-table的文档中提供了一种type的方法，type=selection是多选的形式用select-all、select的方法改写为单选

 // 单选项
    dialogCheck(selection, row) {
      this.$refs.multipleTable.clearSelection()
      this.selectioned = {}
      if (selection.length === 0) {
        // 判断selection是否有值存在
        return
      }
      if (row.id) {
        this.selectioned = row
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },

这样就完成了行数据单选。

2、表格编辑

将tableData添加一个字段来表示改行数据是否编辑的状态，此外我用的是isEdit来表示，用editData表示正在编辑的数据。

<el-table-column label="右标签" prop="rightTags">
          <template v-slot="scope">
            <span v-show="!scope.row.isEdit">{{ scope.row.rightTags }}</span>
            <el-input v-show="scope.row.isEdit" :ref="'inputFocus' + scope.$index" v-model="scope.row.rightTags" placeholder="请输入" class="input" />
          </template>
        </el-table-column>

 <el-table-column label="操作" width="120px">
          <template slot="header">
            <span>操作</span>
            <i class="el-icon-circle-plus" @click="add" />
          </template>
          <template v-slot="scope">
            <el-link v-show="!scope.row.isEdit" :underline="false" type="primary" @click="edit(scope.$index, scope.row)">编辑</el-link>
            <el-link v-show="!scope.row.isEdit" :underline="false" type="danger" @click="deleteRow(scope.row)">删除</el-link>
            <el-link v-show="scope.row.isEdit" :underline="false" type="primary" @click="save(scope.row)">保存</el-link>
            <el-link v-show="scope.row.isEdit" :underline="false" type="info" class="cancel" @click="cancel(scope.row, scope.$index)">取消</el-link>
          </template>
        </el-table-column>

// 添加新的一行
    add() {
      // 保证只有一个在编辑状态
      if (this.list.some((item) => item.isEdit)) {
        this.$message({
          type: 'warning',
          message: '请先保存正在编辑的条件模板内容!'
        })
      } else {
        this.list.push({ ...DEFAULT_DATA })
      }
    },
    // 编辑
    edit(index, item) {
      const currIndex = this.list.findIndex((item) => item.isEdit)
      // 保证只有一个在编辑状态
      if (currIndex !== -1) {
        this.cancel(currIndex)
      }
      this.editData = JSON.parse(JSON.stringify(this.list[index]))
      this.list[index].isEdit = true
    },
  // 取消
    cancel(index) {
      // 取消操作
      if (!this.list[index].id) {
        this.list.splice(index, 1)
      } else {
        this.$set(this.list, index, JSON.parse(JSON.stringify(this.editData)))
        this.editData = null
      }
    }

这样就完成了。