<el-date-picker v-model="value1" align="right" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changeDate">
</el-date-picker>
<el-date-picker v-model="datetime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDate">
</el-date-picker>年月日，时分秒，这种日期组件是我们经常会用到的，我们很多场景都会用到这个组件，所以今天来说一下这两个东西！这里最重要的就是要记住这两个格式，
value-format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd"
剩下的都可以迎刃而解了~
接下来我们说一下table表格~
首先，我们先写一个el-table标签，这个就是表头，然后绑定一个data，接着写一个el-table-column标签，这个表示一列，然后给上label属性，这个属性就是代表这列叫什么名字。
<el-table :data="tableData">
<el-table-column label="名称" ></el-table-column>
</el-table>
tableData:[
{
name:'小刘',
address:'中国',
age:20
}, {
name:'小高',
address:'中国',
age:23
},
]这个数据是一个数组对象，然后我们有name，address，age这三列，那么我们肯定需要三个el-table-column标签。还有一个重要的属性，叫prop，这个代表，哪一列，要放什么数据，就绑定什么属性
<el-row style="margin: 20px 0;">
<el-table :data="tableData">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="国籍" prop="address"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
</el-row>这样就绑定了三个属性，都会显示在下面了
还可以设置表头的样式，通过 :header-cell-style就可以
<el-row style="margin: 20px 0;">
<el-table stripe :data="tableData" border :header-cell-style="{background:'red',fontSize:'20px'}">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="国籍" prop="address"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
</el-row>我们还会遇到很多的实际操作，比如：我们最后一列要变成按钮，这个操作也是经常用的！
<el-row style="margin: 20px 0;">
<el-table stripe :data="tableData" border :header-cell-style="{background:'red',fontSize:'20px'}">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="国籍" prop="address"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="primary" @click="edit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
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的时候就会弹出弹窗，美观很多
