javascript - prop depto_modules.length 不存在于行中，我该如何解决这个问题？

Question

我有一个表，我需要在其中显示另一个关联表中的数据。一切正常，但当我通过一些过滤器时，我收到此警告:

该行中不存在prop depto_modules.length，请确认该prop是否正确，这可能会导致过滤结果不可预测

此警告不会影响操作，但我想删除它。我的表是 Modules，关联表是 depto_modules(DeptoModules)。

我的list.vue:

<template>
  <div class="">
    <alert
      :show-alert="alertShowErrors"
      :closable="alertClosable"
      :type="alertType"
      :title="alertTitle"
      :description="alertDescription"
      :show-icon="alertShowIcon"
    />
    <box box_type="solid" :title="title" :collapse="collapse" class="box-title">
      <el-row>
        <el-col :span="2">
          <el-tooltip class="item" effect="dark" content="Novo" placement="top-start">
            <el-button plain type="primary" size="mini" @click="handleInsert()">
              <i class="fas fa-plus" /><span v-if="device!=='mobile'">&nbsp;&nbsp;Novo</span>
            </el-button>
          </el-tooltip>
        </el-col>
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :offset="1">
          <el-input v-model="filters[0].value" size="mini" placeholder="Search" prefix-icon="el-icon-search" />
        </el-col>
        <el-col :span="3" :offset="1">
          <el-tooltip class="item" effect="dark" content="Update Table" placement="top-start">
            <el-button plain size="mini" @click="handleRefresh()">
              <i class="fas fa-sync" /><span v-if="device!=='mobile'">&nbsp;&nbsp;Atualizar</span>
            </el-button>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <data-tables
            v-loading="listLoading"
            :data="data"
            :filters="filters"
            :total="totalRows"
            :pagination-props="pageSizes"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            @expand-change="handleExpand"
            @query-change="list"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
          >
            <el-table-column align="left" min-width="35" width="70">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="Edit" placement="top-start">
                  <el-button size="mini" type="primary" icon="el-icon-edit" plain circle @click="handleEdit(scope.$index, scope.row)" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="Remove" placement="top-start">
                  <el-button size="mini" type="danger" icon="el-icon-delete" plain circle @click="handleDelete(scope.$index, scope.row)" />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(column, index) in columns"
              :key="column.prop"
              :item="column"
              :index="index"
              :prop="column.prop"
              :label="column.label"
              :type="column.type"
              :resizable="column.resizable"
              :min-width="column.width"
              :align="column.align"
              :header-align="column.headerAlign"
              :formatter="cellValueRenderer"
              sortable="custom"
            />
          </data-tables>
        </el-col>
      </el-row>
    </box>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Box from '@/components/Share/box'
import Alert from '@/components/Alert'
import { iframeResize } from '@/utils/resize_iframe'
import { getStatusCode } from '@/utils/status-response'
import { numberFormat } from '@/utils/cells-format'
import Modules from '@/api/plan/modules'

export default {
  name: 'Modules',
  components: {
    Box,
    Alert
  },
  props: {
    title: {
      type: String,
      default: 'Modules List'
    },
    collapse: {
      type: Boolean,
      default: false
    },
    filterField: {
      type: String,
      default: null
    },
    filterValue: {
      type: (String, Number),
      default: null
    }
  },
  data() {
    return {
      data: [],
      columns: this.loadColumns(),
      filters: this.loadFilter(),
      selectedRow: [],
      pageSize: 10,
      perPage: 10,
      pageSizeExpand: 10,
      pageSizes: {
        background: true,
        pageSizes: [10, 20, 30, 40, 50, 100, 150, 200, 250, 300]
      },
      pageSizesExpand: {
        background: true,
        pageSizes: [10, 20, 30, 40, 50, 100, 150, 200, 250, 300]
      },
      currentPage: 1,
      currentPageExpand: 1,
      totalRows: 0,
      totalRowsExpand: 0,
      listLoading: true,
      expandLoading: false,
      alertType: 'warning',
      alertShowErrors: false,
      alertClosable: false,
      alertShowIcon: false,
      alertTitle: null,
      alertDescription: ''
    }
  },
  computed: {
    ...mapGetters([
      'device'
    ])
  },
  created() {},
  mounted() {
    this.getFilter()
    this.resetAlert()
    this.list()
  },
  updated() {
    this.$nextTick(() => {
      iframeResize()
    })
  },
  methods: {
    cellValueRenderer(row, column, cellValue) {
      var value = cellValue
      if (column.type === 'money') {
        value = numberFormat(cellValue, 'money')
      }
      if (column.type === 'decimal') {
        value = numberFormat(cellValue, 'decimal')
      }
      if (column.type === 'date') {
        value = numberFormat(cellValue, 'date')
      }
      if (column.type === 'percent') {
        value = numberFormat(cellValue, 'percent')
      }
      if (typeof row[column.property] === 'boolean') {
        value = 'Inativo'
        if (cellValue) {
          value = 'Ativo'
        }
      }
      return value
    },
    loadColumns() {
      var columns = [
        { prop: 'id', label: 'ID', resizable: true, align: 'left', headerAlign: 'left', width: '30' },
        { prop: 'name', label: 'Name', resizable: true, align: 'left', headerAlign: 'left', width: '30' },
        { prop: 'path', label: 'Path', resizable: true, align: 'left', headerAlign: 'left', width: '30' },
        { prop: 'depto_modules.length', label: 'Deptos', resizable: true, align: 'left', headerAlign: 'left', width: '30' },
        { prop: 'status', label: 'Status', resizable: true, align: 'left', headerAlign: 'left', width: '30' }
      ]
      if (this.filterField) {
        for (var i = 0; i < columns.length; i++) {
          if (columns[i].prop === this.filterField) {
            columns.splice(i, 1)
          }
        }
      }
      return columns
    },
    loadFilter() {
      var columns = this.loadColumns()
      var filterItems = []
      columns.forEach(function(value) {
        filterItems.push(value.prop)
      })
      var filter = [{ prop: filterItems, value: '' }]
      return filter
    },
    getFilter() {
      if (this.getStore('FilterPageSizeModules')) {
        this.pageSize = this.getStore('FilterPageSizeModules')
      } else {
        this.pageSize = 10
      }
    },
    setFilter() {
      this.setStore('FilterPageSizeModules', this.perPage)
    },
    setParentField() {
      var params = []
      if (this.filterField) {
        params = { 'parent_id': this.filterValue }
      }
      return params
    },
    handleRefresh() {
      this.list()
    },
    handleInsert() {
      this.$router.push({ name: 'Modules_Add', query: this.setParentField() })
    },
    handleEdit(index, row) {
      if (this.filterField) {
        this.setParentField()
      }
      this.setStore('setModulesId', row.id)
      this.$router.push({ name: 'Modules_Edit' })
    },
    handleDelete(index, row) {
      this.setStore('setModulesId', row.id)
      this.delete(row.id)
    },
    handleSizeChange(val) {
      this.perPage = val
      this.setFilter()
      this.$nextTick(() => {
        iframeResize()
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSelectionChange(val) {
      this.selectedRow = val
    },
    handleExpand(row, expandedRows) {
    },
    setStore(field, value) {
      this.$session.set(field, value)
    },
    getStore(field) {
      return this.$session.get(field)
    },
    showAlert(message, title = '') {
      this.alertShowErrors = true
      this.alertClosable = true
      this.alertTitle = title
      this.alertDescription = message
    },
    resetAlert() {
      this.alertShowErrors = false
      this.alertClosable = false
      this.alertTitle = ''
      this.alertDescription = ''
    },
    formatData(data) {
      return data
    },
    async list() {
      this.resetAlert()
      this.listLoading = true
      var tables = { table: 'UsersModules, DeptoModules' }
      var select = {}
      var order = {}
      var query = { ...tables, ...select, ...order }
      if (this.filterField && this.filterValue) {
        query = { ...query, filter: this.filterField + ':' + this.filterValue }
      }
      Modules.list(query)
        .then(response => {
          this.resetAlert()
          var dados = response.data
          this.data = this.formatData(dados.data)
          this.totalRows = dados.count
          this.listLoading = false
        })
        .catch(error => {
          var err = getStatusCode(error)
          this.showAlert(err)
          this.listLoading = false
        })
    }, ...

警告: 我的出局: 有人知道如何删除此警告吗？

Answer 1

尝试更改属性名称:

• 来自:depto_modules.length
• 收件人:depto_modules_length

似乎el-table-column认为depto_modules.length是一个子对象。