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>



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM