element ui表单日期格式化

最新推荐文章于 2024-05-25 15:13:23 发布

原创最新推荐文章于 2024-05-25 15:13:23 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ui #elementui #vue.js

该博客介绍了如何在Vue.js应用中引入和使用Moment.js库来格式化日期。首先通过npm安装Moment.js，然后在组件中导入并使用它。在data对象中定义表格数据，并在methods里定义一个dateFormat方法，用于将日期转换为'YYYY-MM-DD HH:mm:ss'格式。最后，在el-table-column组件中使用formatter属性调用dateFormat方法显示格式化后的日期。

首先引入moment.js

cnpm install moment --save

然后在需要引用的模块中引用

<script>

import moment from 'moment'
export default {
  name: "User",
  data(){
    return({
      tableData: [{
        id:"",
        birthday: '',
        name: '',
        address: '  ',
      },
      ]
    })
  },
  methods: {
    dateFormat: function (row, column) {

      var date = row[column.property];

      if (date == undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    }
  },
}
</script>

然后在组件中引用

   <el-table-column
            prop="birthday"
            label="日期"
            width="180"
            :formatter="dateFormat"
          >
          </el-table-column>