vue中表格中添加日期选择器

在Vue中添加日期选择器，可以使用第三方日期选择器组件，例如Element UI中的DatePicker组件。具体步骤如下：

1. 安装Element UI
在Vue项目中使用Element UI，需要先安装Element UI。可以使用npm命令来安装，具体命令如下：

npm install element-ui --save

2. 引入Element UI
在Vue项目中引入Element UI，可以在main.js中添加以下代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在表格中使用DatePicker组件
在表格中使用DatePicker组件，需要在表格单元格中添加<el-date-picker>元素。在该元素中，可以设置v-model属性来绑定日期选择器的值，设置type属性来指定日期选择器类型，例如date、datetime等。例如：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="birthday" label="出生日期">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.birthday"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

其中，tableData是表格的数据源，name和birthday是表格的列名，scope.row.birthday表示当前行的出生日期。在el-date-picker中，v-model绑定了出生日期的值，type指定了日期选择器类型为date，placeholder指定了日期选择器的提示文本。

4. 样式调整
默认情况下，Element UI的DatePicker组件会受到全局样式的影响，可能会导致样式不协调。可以通过在组件上添加class属性或者通过CSS样式覆盖来调整样式。例如：

<el-date-picker
  v-model="scope.row.birthday"
  type="date"
  placeholder="选择日期"
  class="datepicker">
</el-date-picker>

.datepicker .el-input__inner {
  font-size: 14px;
  height: 28px;
  line-height: 28px;
}

以上就是在Vue中添加日期选择器的步骤，希望能对你有所帮助。