VUE全家桶项目实战-- 7.组件表格区

最新推荐文章于 2024-09-09 09:10:37 发布

朗里格儿浪

最新推荐文章于 2024-09-09 09:10:37 发布

阅读量293

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/lighter613/article/details/105961978

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文聚焦于Vue项目中的组件表格实践，详细介绍了如何使用Table表格展示和操作数据，包括编辑和删除功能。同时提及了Element UI库中的Table组件，用于增强表格功能和页面优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE全家桶项目实战-- 7.组件表格区

- 一.Table表格
- 二.拓展

一.Table表格

<template>
	<!--	:data : 显示的集合数据
			width:表格宽度
			border : 是否带有纵向边框
	-->
    <el-table :data="list" style="width: 100%">
        <!--
			prop : 集合中对象的字段名
			label: 标题名称
			width : 单元格宽度
		-->
      <el-table-column prop="ID" label="ID" > </el-table-column>
      <el-table-column prop="username" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="age" label="年龄"> </el-table-column>
        <el-table-column label="操作"  fixed="right" width="130px">
            <!--
				slot-scope: 通过scope.row 可以获取到改行的对象
				-->
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
              <!--
					effect:默认提供的主题,默认是dark
					content:提示文字
					placement:Tooltip 的出现位置
					enterable:鼠标是否可进入到 tooltip 中,防止两行之间互相干扰
				-->
            <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
                <!--
					type:按钮类型
					icon:图标
					size:大小
					click:点击回调函数
				-->
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                @click="openOperatorDialog('2',scope.row)"
              ></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                @click="deleteById(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      name:'自定义',
      data() {
        return {
            list: [
                //可以不写这个对象,这样没有数据时,表格无数据,否则有一行空数据
                //{
                    //ID:'',
                   // username:'',
                    //age:''
                //}
            ]
        }
      },
        create(){
            
        },
        methods:{
            findList(){
                this.$http.post("/****/*****",{}).then(res =>{
                    const body = res.data;
                    if(body.code === 0){
                        this.list = body.list;
                    }
                })..catch(res => {
                  this.$message.error("查询列表异常");
                  
                });
            },
            openOperatorDialog(type,row){
                
            }
        }
    }
  </script>