当前位置：首页 > news >正文

element ui的time时间和table表格

news 来源：原创 2025/5/10 20:33:45

 <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的时候就会弹出弹窗，美观很多