• 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>
    
    
    
  • 相关阅读:
    Linux下C编程入门(1)
    Git 常用命令速查表
    Git Cheat Sheet 中文版
    Linux 在一个命令行上执行多个命令
    一个奇怪的错误的警示
    模块化编程实例(一)
    含有指针变量的结构体的指针的应用
    iOS 开发加密做法
    关于设置shadowPath的重要性
    关于设置shadowPath的重要性
  • 原文地址:https://www.cnblogs.com/ybixian/p/11412789.html
Copyright © 2020-2023  润新知