vue+iview 在表格中添加日期选择器

在使用iview表格中添加日期选择器，可以使用iview提供的DatePicker组件，具体步骤如下：

1. 在表格中添加列，用于显示日期选择器。

<Table :columns="columns" :data="tableData">
  <template slot-scope="{ row }" slot="date">
    <DatePicker v-model="row.date" type="date" placeholder="Select date"></DatePicker>
  </template>
</Table>

2. 在columns中添加date列，并设置自定义渲染函数。

data() {
  return {
    columns: [
      {
        title: 'Name',
        key: 'name'
      },
      {
        title: 'Age',
        key: 'age'
      },
      {
        title: 'Date',
        key: 'date',
        render: (h, params) => {
          return h('div', [
            h('span', params.row.date ? formatDate(params.row.date) : ''),
            h('Icon', {
              props: {
                type: 'md-calendar',
                size: 18
              },
              style: {
                margin: '0 5px'
              },
              on: {
                click: () => {
                  this.$refs.table.toggleRowExpansion(params.index);
                }
              }
            })
          ]);
        }
      }
    ],
    tableData: [
      {
        name: 'John',
        age: 20,
        date: null
      },
      {
        name: 'Mary',
        age: 22,
        date: null
      },
      {
        name: 'Tom',
        age: 24,
        date: null
      }
    ]
  };
},

3. 添加格式化日期的方法。

methods: {
  formatDate(date) {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = d.getMonth() + 1;
    const day = d.getDate();
    return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
  }
}

这样就可以在iview表格中添加日期选择器了。