vue2x+antd1x

columns 参数必须放到data里面进行声明否则失效

template显示

<template>
	<a-table :columns="columns" :dataSource="dataSource" :pagination="false" ></a-table>
</template>

有效的方法

<script>
export default {
	data() {
		return {
			dataSource: [],
			 columns:[
	          {
	            title: 'Date Sent',
	            dataIndex: 'paymentDate',
	            key: 'paymentDate',
	            align: 'center',
	            customRender: (text,record) => {
	              if (record.status == 2) {
	                  return <span style="color:red">{ text }</span>;
	                }else{
	                  return text
	                }
	            },
	          },
	          {
	            title: 'Sender Account Name',
	            key: 'accountName',
	            dataIndex: 'accountName',
	            align: 'center',
	          },
          ]
		}
	}
}
</script>

无效

const columns = [
	{
     title: 'Date Sent',
      dataIndex: 'paymentDate',
      key: 'paymentDate',
      align: 'center',
      customRender: (text,record) => {
        if (record.status == 2) {
            return <span style="color:red">{ text }</span>;
          }else{
            return text
          }
      },
    },
    {
      title: 'Sender Account Name',
      key: 'accountName',
      dataIndex: 'accountName',
      align: 'center',
    },
]
<script>
export default {
	data() {
		return {
			dataSource: [],
			 columns,
		}
	}
}
</script>

vue3x+antd3x

js写法

<template>
<div>{{num}}</div>
  <a-table
    class="ant-table-striped"
    size="middle"
    :columns="columns"
    :data-source="data"
    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
  />
</template>
<script>
import { defineComponent, ref } from 'vue'
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    customRender: function ({ text }) {
      return <span style="color: red;cursor: pointer;" onClick={changeNum}>{text}</span>
    }
  }, {
    title: 'Age',
    dataIndex: 'age'
  }, {
    title: 'Address',
    dataIndex: 'address'
  }
]
const num = ref(0)
const changeNum = () => {
  num.value++
}
const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park'
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park'
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park'
}, {
  key: '4',
  name: 'Ben Kang',
  age: 15,
  address: 'Sidney No. 1 Lake Park'
}]
export default defineComponent({
  setup () {
    return {
      data,
      columns,
      num,
      changeNum
    }
  }

})
</script>

效果如下

ts语法

<template>
  <div>{{num}}</div>
  <a-table
    class="ant-table-striped"
    size="middle"
    :columns="columns"
    :data-source="data"
    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
  />
</template>
<script lang="ts">
import { ref, defineComponent, h, VNode } from 'vue'

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    customRender: function ({ text }):VNode {
      return h('div', {
        style: {
          color: 'red',
          cursor: 'pointer'
        },
        class: 'name',
        onClick: changeNum
      }, text)
    }
  },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Address', dataIndex: 'address' }
]
const num = ref(0)
const changeNum = () => {
  num.value++
}

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park'
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park'
  },
  {
    key: '4',
    name: 'Ben Kang',
    age: 15,
    address: 'Sidney No. 1 Lake Park'
  }
]

export default defineComponent({
  setup () {
    return {
      data,
      columns,
      num,
      changeNum
    }
  }
})
</script>

效果如下图