TableReadOnly.vue

<template>
  <el-table
    v-loading="isLoaded"
    :row-key="getterPanel.keyColumn"
    :data="showTableSearch ? filterResult() : getterDataRecords"
    :element-loading-text="$t('notifications.loading')"
    element-loading-background="rgba(255, 255, 255, 0.8)"
    element-loading-spinner="el-icon-loading"
    cell-class-name="datatable-max-cell-height"
    @row-click="handleRowClick"
    @row-dblclick="handleRowDblClick"
    @select="handleSelection"
    @select-all="handleSelectionAll"
  >
    <el-table-column
      v-if="isTableSelection"
      type="selection"
      :prop="getterPanel.keyColumn"
      fixed
      min-width="50"
    />
    <template v-for="(fieldAttributes, key) in fieldList">
      <el-table-column
        v-if="isDisplayed(fieldAttributes)"
        :key="key"
        :label="headerLabel(fieldAttributes)"
        :column-key="fieldAttributes.columnName"
        :prop="fieldAttributes.columnName"
        :fixed="fieldAttributes.isFixedTableColumn"
      >
        <template slot-scope="scope">
          <template v-if="((!isParent) && scope.row.isEdit && !isReadOnlyCell(scope.row, fieldAttributes) && !isReadOnlyRow(scope.row, fieldAttributes))">
            <field-definition
              :is-data-table="true"
              :is-show-label="false"
              :metadata-field="{
                ...fieldAttributes,
                parentUuid: parentUuid,
                displayColumn: scope.row['DisplayColumn_' + fieldAttributes.columnName],
                keyColumn: getterPanel.keyColumn,
                recordUuid: scope.row.UUID
              }"
              :record-data-fields="scope.row[fieldAttributes.columnName]"
              @keyup.enter.native="confirmEdit(scope.row)"
            />
          </template>
          <span v-else>
            {{ displayedValue(scope.row, fieldAttributes) }}
          </span>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  name: 'TableRecords',
  computed: {
    getterContextClientId() {
      return parseInt(this.$store.getters.getContextClientId, 10)
    }
  },
  methods: {
    /**
     * @param {object} row, row data
     * @param {object} field, field with attributes
     */
    displayedValue(row, field) {
      if (typeof row[field.columnName] === 'boolean') {
        // replace boolean true-false value for 'Yes' or 'Not'
        return row[field.columnName] ? this.$t('components.switchActiveText') : this.$t('components.switchInactiveText')
      } else if (field.componentPath === 'FieldDate' || field.componentPath === 'FieldTime') {
        let cell = row[field.columnName]
        if (Object.prototype.toString.call(cell) === '[object Date]') {
          cell = cell.getTime()
        }
        // replace number timestamp value for date
        return formatDate(cell, field.referenceType)
      } else {
        return row['DisplayColumn_' + field.columnName] || row[field.columnName]
      }
    },
    isReadOnlyCell(row, field) {
      // TODO: Add support to its type fields
      if (field.componentPath === 'FieldImage' || field.componentPath === 'FieldBinary') {
        return true
      }

      const isUpdateableAllFields = field.isReadOnly || field.isReadOnlyFromLogic
      if (this.panelType === 'window') {
        if (field.columnName === this.getterPanel.linkColumnName ||
          field.columnName === this.getterPanel.fieldLinkColumnName) {
          return true
        }
        // edit mode is diferent to create new
        const editMode = !this.isEmptyValue(row.UUID)
        return (!field.isUpdateable && editMode) || (isUpdateableAllFields || field.isReadOnlyFromForm)
      } else if (this.panelType === 'browser') {
        // browser result
        return field.isReadOnly
      }
      // other type of panels (process/reports)
      return isUpdateableAllFields
    },
    isReadOnlyRow(row, field) {
      if (this.panelType === 'window') {
        if (this.getterContextClientId !== parseInt(row.AD_Client_ID, 10)) {
          return true
        }
        if (fieldIsDisplayed(field)) {
          // TODO: Add support to isChangedAllRecord columnName: Processed, Processing
          // columnName: IsActive
          const fieldReadOnlyForm = FIELD_READ_ONLY_FORM.find(item => {
            return row.hasOwnProperty(item.columnName) && !item.isChangedAllForm
          })
          if (fieldReadOnlyForm) {
            var isReadOnlyRow = row[fieldReadOnlyForm.columnName] === fieldReadOnlyForm.valueIsReadOnlyForm && field.columnName !== fieldReadOnlyForm.columnName
            return isReadOnlyRow
          }
        }
      }
      return false
    },
    handleRowClick(row, column, event) {
      if (this.isShowedPanelRecord && this.isParent) {
        this.$router.push({ query: {
          ...this.$route.query,
          action: row.UUID
        }})
      } else {
        if (!row.isEdit) {
          row.isEdit = true
          this.inEdited.push(row.UUID)
        }
      }
    },
    handleRowDblClick(row, column, event) {
      row.isEdit = false
      if (!this.isShowedPanelRecord) {
        this.confirmEdit(row, null, null)
      }
    }
  }
}
</script>

rowCanBeEdited(scope) {
if (!this.isParent) {
const areRowAndCellEditable = !this.isReadOnlyCell(scope.row, fieldAttributes) && !this.isReadOnlyRow(scope.row, fieldAttributes);
if (areRowAndCellEditable)
if (scope.row.isEdit)
return true
}
return false

}

y en el v-if="rowCanBeEdited(scope)"