manual+row模式如何根据条件禁止编辑某个单元格

owen4comes commented 5 years ago

描述 Describe 我尝试过例子中的click10去禁止某个单元格编辑，但我的table使用的是manual+row模式，于是activeMethod中的column是null，所以我判断不了单元格的信息，只能控制行是否可编辑，这不能符合我的需要。 click10例子中是click+cell模式，我尝试过的确可以控制到单元格的禁止编辑，但目前我这边是需要用manual+row模式，于是我在edit-render中入手：

:edit-render="((editingRow && editingRow.order_id) ||addingProductData)?'':{name: 'ElInput'}"

我判断在某个条件下，这个单元格空白，反之则显示编辑框，但控制台报错，说edit-render必须为一个Object（这样做有时是可以实现，但有时又不显示编辑框，所以感觉这样做也不行）。

请问还有什么方法在manual+row模式下根据条件禁止编辑某个单元格？

请填写以下版本信息 please complete the following information vue: 2.6.10 element-ui:2.8.2 vue-element-extends: 1.2.14

xuliangzhan commented 5 years ago

整行编辑情况下是不能禁用单元格的，需要禁用你可以使用自定义渲染去处理

XdyGoGo commented 5 years ago

我也遇到这个问题 click+cell是可以实现单个单元格不可编辑，但input的border会消失，并且需要点击才可以编辑，用户体验一般，有什么办法可以在manual+row模式下对单个单元格进行编辑呢

XdyGoGo commented 5 years ago

        if (this.oldRow.field !== row.field) {
            Message({ message: "属性'{字段}'无法编辑,请新增", type: 'warning' })
            row.field = this.oldRow.field
            return
        }

最终我使用了这种，从用户体验上来说，比较符合我的预期

xuliangzhan commented 5 years ago

使用自定义渲染是可以解决的，想控制到什么程度都可以自己实现

<template v-slot:edit="scope">
        <el-input v-model="scope.row.name" :disabled="disabledMethod(scope)"></el-input>
 </template>

disabledMethod ({ row, column }) {
  return column.property === 'age' && row.age < 20
}

XdyGoGo commented 5 years ago

谢谢。晚点试试

xuliangzhan / vue-element-extends

manual+row模式如何根据条件禁止编辑某个单元格 #116