关于antdv表格中customRender不起作用的研究（Vue2）

官方给的案例一个是表格中的合并Ant Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://1x.antdv.com/components/table-cn/#components-table-demo-colspan-and-rowspan一个是表格中的可编辑Ant Design VueAn

renovateF5

6983人浏览 · 2022-04-15 15:45:30

renovateF5 · 2022-04-15 15:45:30 发布

官方给的案例

一个是表格中的合并

Ant Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://1x.antdv.com/components/table-cn/#components-table-demo-colspan-and-rowspan一个是表格中的可编辑

Ant Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://1x.antdv.com/components/table-cn/#components-table-demo-editable-rows这里的customRender最后return出去的，可以是普通的字符串，或者dom元素，比如下面的官方给的a链接：

        customRender: (text, row, index) => {
          if (index < 4) {
            return <a href="javascript:;">{text}</a>;
          }
          return {
            children: <a href="javascript:;">{text}</a>,
            attrs: {
              colSpan: 5,
            },
          };
        },

但是把可编辑的放到合并列的会不成功，原因是columns这个数组写的位置不对，一个是放在了export default外面，一个是放到了export default里面的data函数，只有放在data函数中才起作用

上述antdv两个代码的简单处理

不起作用的（address应该有地址组成的链接）

<template>
  <a-table :columns="columns" :data-source="data" bordered>

  </a-table>
</template>
<script>
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
];
const columns = [
  {
    title: 'name',
    dataIndex: 'name',
    customRender: (text, row, index) => {
      return text;   
    },
  },
  {
    title: 'age',
    dataIndex: 'age',
    customRender: (text, row, index) => {
      return text;   
    },
  },
  
  {
    title: 'address',
    dataIndex: 'address',
    customRender: (text, row, index) => {
      return <a href="javascript:;">{text}</a>;;   
    },
  },
];
export default {
  data() {

    return {
      data,
      columns,
    };
  },
  methods: {
   
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>

有作用的（即a标签）

<template>
    <a-table :columns="columns" :data-source="data" bordered>

  </a-table>
</template>
<script>
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        customRender: (text, row, index) => {
            return <a href="javascript:;">{text}</a>;
        },
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Phone',
        dataIndex: 'phone',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
    ];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
];

export default {
  data() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        customRender: (text, row, index) => {
            return <a href="javascript:;">{text}</a>;
        },
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Phone',
        dataIndex: 'phone',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
    ];
    return {
      data,
      columns,
    };
  },
};
</script>