element ui的time时间和table表格

年月日，时分秒，这种日期组件是我们经常会用到的，我们很多场景都会用到这个组件，所以今天来说一下这两个东西！这里最重要的就是要记住这两个格式，

value-format="yyyy-MM-dd HH:mm:ss"

value-format="yyyy-MM-dd"

剩下的都可以迎刃而解了~

接下来我们说一下table表格~

首先，我们先写一个el-table标签，这个就是表头，然后绑定一个data，接着写一个el-table-column标签，这个表示一列，然后给上label属性，这个属性就是代表这列叫什么名字。

                

 

 tableData:[

            {

                    name:'小刘',

                    address:'中国',

                    age:20

                },  {

                    name:'小高',

                    address:'中国',

                    age:23

                },

            ]

这个数据是一个数组对象，然后我们有name，address，age这三列，那么我们肯定需要三个el-table-column标签。还有一个重要的属性，叫prop，这个代表，哪一列，要放什么数据，就绑定什么属性

这样就绑定了三个属性，都会显示在下面了
还可以设置表头的样式，通过 :header-cell-style就可以

我们还会遇到很多的实际操作，比如：我们最后一列要变成按钮，这个操作也是经常用的！

            
                
                
                
                
                    
                
            
        


  methods:{
        edit(row){
            alert(row.name)
        }
    }

我们首先更改最后一列，变成操作，然后用v-slot插槽，接着写一个按钮，在按钮上绑定一个点击事件，然后再点击事件中，将行数据传入，最后在方法中写弹出事件，弹出名字即可
 

v-slot 指令的使用场景包括但不限于以下几种：

• 在组件中使用插槽，将父组件中的内容传递给子组件。
• 在子组件中使用具名插槽，根据插槽名称渲染不同的内容。
• 在子组件中使用作用域插槽，将子组件中的数据传递到父组件中进行渲染。

我们再来美化一下弹窗，哈哈哈哈

methods:{
        edit(row){
            // alert(row.name)
            this.$confirm('这是个什么玩意？','提示',{
                type:'warning'
            }).then(res=>{
                this.$message.success("ok我点击了确认")
            }).catch(()=>{
                this.$message.warning("ok我点击了取消")

            })
        }
    }

这样点击edit的时候就会弹出弹窗，美观很多