zoukankan      html  css  js  c++  java
  • ant-design-vue 报错 ReferenceError: h is not defined

    使用表格,在配置 columns时用到了 customRender,然后就报错了

    <script>
    import FileName from '@/views/admin/document/FileName'
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        customRender: () => <FileName />,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
         '12%'
      },
      {
        title: 'Address',
        dataIndex: 'address',
         '30%',
        key: 'address'
      }
    ]
    
    const data = [
      {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park'
      }
    ]
    export default {
      name: 'DocumentList',
      components: {
        CreateForm,
        NoData,
        FileName
      },
      data() {
        return {
          data,
          columns
        }
      },
      computed: {},
      methods: {
        customRow (record) {
          return {
            on: { // 事件
              click: () => {
                console.log('点击行了')
              },       // 点击行
              mouseenter: () => {
                console.log('鼠标移入行')
              }  // 鼠标移入行
            }
          }
        }
      },
      created() {
      }
    }
    </script>
    
    
    

    报错原因, 没有把 columns放到data 里面,获取不到上下文

    这样改

    data() {
        const columns = [...]
        return {
            columns
        }
    }
    
    <script>
    import FileName from '@/views/admin/document/FileName'
    
    export default {
      name: 'DocumentList',
      components: {
        FileName
      },
      data() {
    
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        customRender: () => <FileName />,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
         '12%'
      },
      {
        title: 'Address',
        dataIndex: 'address',
         '30%',
        key: 'address'
      }
    ]
    
    const data = [
      {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park'
      }
    ]
    
        return {
          data,
          columns
        }
      },
      computed: {},
      methods: {
        customRow (record) {
          return {
            on: { // 事件
              click: () => {
                console.log('点击行了')
              },       // 点击行
              mouseenter: () => {
                console.log('鼠标移入行')
              }  // 鼠标移入行
            }
          }
        }
      },
      created() {
      }
    }
    </script>
    
    
    
  • 相关阅读:
    Windows下安装MySQLdb(mysql-python)报错解决
    关于安装bettercap的ERROR: Failed to build gem native extension 报错解决
    Centos6 下启动httpd报错 Could not reliably determine the server's解决方法
    Linux安装mysql-python库时报错解决办法
    [Flask]学习Flask第三天笔记总结
    [原创+实战+钓鱼]setoolkit+映射
    [实战]挖掘CSRF姿势
    [实战]记一次PUT方法拿下网站shell
    JAVA二维数组小记
    技术杂谈
  • 原文地址:https://www.cnblogs.com/ybixian/p/11412789.html
Copyright © 2011-2022 走看看