Error in render: "TypeError: Cannot read property 'url' of undefined"

Question

el table colum 读取不到scope.row.url

<template>
  <div class="app-container">
    <!-- 遮罩层 -->
    <transition name="transition">
      <div v-if="mask == true" class="mask" />
    </transition>
    <el-tabs v-model="activeName" style="width: 100%;" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="顶部轮播图" name="first" class="el-tab-pane">
        <!-- 轮播图添加按钮，点击弹出表单 -->
        <el-button type="primary" @click="changemask">添加轮播图</el-button>
        <transition name="transition">
          <!-- 轮播图添加表单 -->
          <div v-if="mask == true" class="formbox" :style="{height:appHeight ,width:appWidth}" @click="ResetMask">
            <div class="form" @click="StopResetMask">
              <!-- 二次封装表单组件 -->
              <banner-form @sonform="getAndUploadForm" @resetMask="ResetMask">表单组件</banner-form>
            </div>
          </div></transition>

        <!-- 中部显示轮播图信息 -->
        <el-table
          class="el-table"
          :data="tableData"
          height="el-table"
          border
          style="width: auto;"
        >
          <el-table-column
            prop="number"
            label="排序"
            width="80"
          />
          <el-table-column
            prop="name"
            label="名称"
            width="180"
          />
          <el-table-column
            prop="link_src"
            label="链接地址"
            width="180"
          />
          <el-table-column
            label="图片"
          />
          <template slot-scope="scope">
            <el-image :src="scope.row.url" />
          </template>
          <el-table-column
            prop="creat_time"
            label="添加时间"
            width="180"
          />
          <el-table-column
            prop="state"
            label="状态"
            width="180"
          />
          <el-table-column
            label="操作"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="small "
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                size="small "
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="底部导航" name="second">底部导航</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { UploadBanner, getBannerList } from '@/api/setting/home'
import { Loading } from 'element-ui'
export default {
    name: '',
    data() {
        return {
            activeName: 'first',
            msg: '',
            mask: false, // 遮罩层
            // form表单数据
            form: {
                name: '',
                src: '',
                link: '',
                number: '',
                state: ''
            },
            tableData: [],
            AppMainWidth: '',
            AppMainHeight: ''
        }
    },
    computed: {
        appHeight: function() {
            return this.AppMainHeight + 'px'
        },
        appWidth: function() {
            return this.AppMainWidth + 'px'
        }
    },
    created() {
        this.fetchData()
    },
    mounted() {
        this.AppMainWidth = document.getElementById('AppMain').offsetWidth
        this.AppMainHeight = document.getElementById('AppMain').offsetHeight
    },
    methods: {
        handleEdit(index, row) {
            console.log(row)
        },
        fetchData() {
            const loading = Loading.service({ })
            console.log('this.loading')
            getBannerList().then(response => {
                console.log(response.data)
                console.log('response.data')
                this.tableData = response.data
                console.log(this.tableData)
                loading.close()
            })
        },
        handleClick(tab, event) {
            console.log(tab, event)
            console.log(process.env.VUE_APP_BASE_API)
        },
        changemask() {
            console.log(this)
            this.mask = true
            console.log(this.mask)
        },
        ResetMask() {
            console.log('ResetMask')
            this.mask = false
        },
        StopResetMask(e) {
            e.stopPropagation()
        },
        getAndUploadForm(data) {
            this.form = data
            console.log(this.form)
            const loading = Loading.service({ })
            UploadBanner(this.form).then(Response => {
                const message = Response.message
                this.$message({
                    message: message,
                    type: 'success'
                })
                setTimeout(() => {
                    this.fetchData()
                }, 500)
            })
        }
    }
}
</script>

<style lang="less" scoped>
/* 缩放动画 */
.transition-enter, .transition-leave-to {
  transform: scale(0)
}
.transition-leave, .transition-enter-to {
  transform: scale(1)
}
.transition-enter-active, .transition-leave-active {
  transition: all 0.3s
}
.app-container{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.103);
}
.formbox{
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
}
.form{
  align-self:flex-start;
  margin-top: 100px;
  background-color: #fff;
  padding: 50px;
  border: 1px solid rgb(161, 161, 161);
}
.el-tab-pane{
  width: 100%;
}
.el-table{
    width: 100%;
    height: calc(100vh - 184px);;
    margin: 20px;
}

</style>

Answer 1

打印的this.table data里有url属性吗？是小写？
报错的template标签是否也得加上table-collomn标签，不然没有scope.row属性吧？