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',
    width: '12%'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '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',
    width: '12%'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '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>

转载于:https://www.cnblogs.com/ybixian/p/11412789.html