3.Vue3——自定义组件

千门江月

已于 2024-05-12 08:44:18 修改

阅读量1.1k

点赞数 8

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

于 2024-05-10 12:27:58 首次发布

本文链接：https://blog.csdn.net/2401_82986110/article/details/138660558

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue3——2.组件

前言

参考资料：Vue基础.md · 蒋鹏/Vue2+3入门到实战-配套每日作业 - Gitee.com

5.9峰哥直播，问女人有啥好的？答：你说这话是没摸过香香软软的小蛮腰。不喜欢老实女人。

男女就像一把锁和一个钥匙，到底谁获利了呢？钥匙为啥抓心挠肝呢，因为3d，缺乏，性压抑。

性压抑典型：女人乃身外之物3db友，太压抑了。

多锻炼自己，提升动力，世界是可以开心快乐的。阿德勒心理。快点吧工作搞定，多去丰富自己的生活，不要陷进去了。

性&自身健康&外貌身材&工作，万千世界，多去闯闯，现实自我实现吧，天天在网上吵分析，毫无意义。专注自身发展，不要在网上当小丑，多写东西，多发展自身。

1.写组件

什么是组件？h1就是一个组件，就是标签，一个组件具备：组件本身即标签+属性+事件，属性用来提供数据，事件用来提供功能，事件的实现通过组件事先提前封装写好方法。

所以，如何写一个简单的组件呢？

写一个标签
完善该标签的属性和方法，对外提供。——属性props接受外部传入数据 emit向外部传出事件，2者都需要先注册再使用。

有些内容是待定的，你只需要固定它的位置，比如一个古诗组件，标题等等都是需要使用时填入，这个时候就需要——使用插槽实现

1.写一个标签（导入）
2.定义属性
3.插槽 【内容分发机制，允许父组件内容分发传输给子组件】
	定义
	<slot></slot> 【默认插槽】
	<slot name="header"></slot> 【具名插槽】
	<slot :item="item"></slot>【作用域插槽：子组件向父组件传递数据】
	使用
	<template v-slot:header></template>   //使用#也可以
	<template v-slot:defalut='slotProps'></template>

案例1：自定义面板

子组件：
<slot name="header" :data="data">
        <h3>作者：{{ data.author }}</h3>
        <div class="text">{{ data.content }}</div>
</slot>
父组件：
<fist-component v-slot:header="slotProps">{{ slotProps }}</fist-component>

在这里插入图片描述

案例2：表单数据回填

案例3：完整的表格：编辑，增删，搜索

2.了解组件：生命周期&动态组件&路由

vue组件的生命周期可以分为：创建，挂载，销毁，更新。每个阶段对应2个钩子函数，可以再具体的阶段做相应的一些处理。

创建阶段：创建虚拟dom，初始化响应式数据
挂载阶段：挂载后，可以操作dom。nextTick，为了避免dom问题可以使用这个解决问题。

路由

路由对象

1.router[history,routes]
	router.options.routes
2.routes[映射表]
	useRoute 拿到routes映射表相关信息
3.映射表语法规则
	1.嵌套     children的path不要+/
    2.路径变量  /details ————  /details/:id
	3.
4.link 
	写法
		1.html:  to='path'   to={path:'/details',paramas:{userID:jiangyue}}
		2.js    router.push()
	通过link传参
    	:to="'/details/'+id"   :to={path:'/details',paramas:{userID:jiangyue}}
5.路由守卫函数

案例1：动态路由传参

1.写映射表   /details/:id
2.通过link传参   :to="'/details/'+id"
3.拿到映射表相关数据，比如餐宿 useRoute.xxx

3.组件的统一数据管理：pinia

参考官网

1.安装&编写


新建文件夹store 
	1.defineStore(id,{options})
options
	state  —— data
    getters—— computed
    actions—— methods
使用
	import {useXXXstore} from './store/index.js'
	const test=usexxxStore()
    test.xxx

在这里插入图片描述

2.使用

1.使用变量

<script setup>
import { ref } from 'vue'
import { useStore } from '../store'

const test = useStore()

</script>

<template>
<h1>piniaVue测试</h1>
<p>{{test.count}}</p>
</template>

<style lang="scss" scoped>

</style>

2.修改变量的5种方法

<script setup>
import { ref } from 'vue'
import { useStore } from '../store'

const test = useStore()

const change=()=>{
  test.count++; //1.直接修改
  // patch:补丁，引申为局部更新
  test.$patch({count:888,name:'江月'}); //2.使用$patch的对象写法修改
  test.$patch((state)=>{
    state.count++;
    state.name="江月";
  })     //3.使用$patch方法的函数式写法修改
  test.$state={
    count:200,
    name:'小满2b'
  } //4.使用$state直接修改状态,缺点是必须修改全部状态，不能局部更新
  // 5.通过actions修改状态
    直接调用actions中的函数 test.xxxx();
} 

 actions:
    {
      xxx(state) {
        state.count++
      },
    }

</script>

<template>
<h1>piniaVue测试</h1>
<p>{{test.count}}————{{test.name}}</p>

<button @click="change">change</button>
</template>

调试工具观察

在这里插入图片描述

4.组件库的使用

推荐使用element-UI，vant，ant…

Element-UI

1.安装&快速开始——参考官网即可
2.layout
3.一个网页开发有哪些组件？这些有些功能，需要配合三方插件来实现。
	示例1：个人信息填写，修改。
    示例2：数据展示，可视化展示
    示例3：权限控制
    示例4：性能优化
    	加载问题——骨架屏，虚拟列表，图片懒加载，分包预加载
        打包问题——具体见工程化章节

在这里插入图片描述

1.快速开始

1.安装&快速开始——参考官网即可____记得安装element插件
2.组件
	组件分类
    如何使用组件？
    	value/props+methods+slot;
3.一个网页开发有哪些组件？这些有些功能，需要配合三方插件来实现。
	示例1：个人信息填写，修改。
    示例2：数据展示，可视化展示
    示例3：权限控制
    示例4：性能优化
    	加载问题——骨架屏，虚拟列表，图片懒加载，分包预加载
        打包问题——具体见工程化章节

1.row——col
2.container
	width：100%；
	heghit：100px/100vh
3.

2.常用组件

ElementPlus 快速掌握 - 邓瑞编程 (dengruicode.com)

button
icon

1.消息提示：ElMessage, ,Notification,ElMessageBox

<script setup>
import { ElMessage,ElMessageBox,ElNotification  } from 'element-plus';
import { h } from 'vue';
// 1.Message   重要性优先级低的提示
const openMsg = () => {
  ElMessage({
    message: '消息提示，一般用于全局提示',
    grouping: true,
    type: 'success',
  })
}
// 2.Notification  重要性优先级高的提示
const openNotifiy = () => {
  ElNotification({
    title: 'Success',
    message: '系统更新成功',
    type: 'success',
    position: 'bottom-right'
  })
}
const openNotifiy2 = () => {
  ElNotification({
    title: '新的消息',
    message: h('i', { style: 'color: teal' }, '您的优惠券已到帐，请及时使用'),
  })
}

// 3.messageBox  一般用于删除操作【重要事件进行二次确认】 
const openMsgBox = () => {
  ElMessageBox.confirm(
    '确定删除吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作已取消',
      })
    })
}


</script>

<template>
  <el-button @click="openMsg">消息</el-button>
  <el-button @click="openNotifiy">通知</el-button>
  <el-button @click="openNotifiy2">通知2</el-button>
  <el-button @click="openMsgBox">确认框</el-button>

</template>

2.菜单

demo1:横向菜单

在这里插入图片描述

<script setup>
import { ref } from 'vue';

const activeIndex = ref('1')

const handleSelect = (index) => {
   //当前索引配合
  activeIndex.value = index
  console.log(activeIndex.value);
}
</script>
<template>
  <div class="container">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-sub-menu index="2">
        <template #title>职业</template>
        <el-menu-item index="2-1">枪炮师</el-menu-item>
        <el-menu-item index="2-2">狂战士</el-menu-item>
        <el-menu-item index="2-3">魔法师</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>圣骑士</template>
          <el-menu-item index="2-4-1">蓝拳圣使</el-menu-item>
          <el-menu-item index="2-4-2">驱魔师</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu>

  </div>
 


</template>

<style>
.container{
  width: 100vw;
  height: 100vh;
  background-color: #c7c2c2;
}
.el-menu-demo{
  width: 250px;
  position: fixed !important;
  top: 0;
  right: 0;
  
}
</style>

demo02：获取当前索引+路由配合

在这里插入图片描述

1.开启router模式
2.:default-active="activeRoute"  <el-menu-item index="path">首页</el-menu-item>
3.使用handleSelect/ watch

<script setup>
import { ref,watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
console.log(route.path);
const activeRoute = ref(route.path);

// 方式1：使用事件监听
const handleSelect= (newPath) => {
  activeRoute.value = newPath;
}
// 方式2：使用watch监听
watch(() => route.path, (newPath) => {
  activeRoute.value = newPath;
});


</script>
<template>
  <div class="container">
    <el-menu :default-active="activeRoute" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
      <el-menu-item index="/about">首页</el-menu-item>
      <el-sub-menu index="2">
        <template #title>职业</template>
        <el-menu-item index="2-1">枪炮师</el-menu-item>
        <el-menu-item index="2-2">狂战士</el-menu-item>
        <el-menu-item index="2-3">魔法师</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>圣骑士</template>
          <el-menu-item index="2-4-1">蓝拳圣使</el-menu-item>
          <el-menu-item index="2-4-2">驱魔师</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu>
    <router-view></router-view>
  </div>
 


</template>

<style>
.container{
  width: 100vw;
  height: 100vh;
  background-color: #c7c2c2;
}
.el-menu-demo{
  width: 250px;
  position: fixed !important;
  top: 0;
  right: 0;
  
}
</style>

3.选项卡:Tabs

1.选项卡的本质就是设置css：display的动态切换

2.用途：一个产品各方面介绍用选项卡；而导航多页面切换的。

3.1普通选项卡

type="card"
<template>
    <h1>选项卡tabsDemo</h1>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"  type="border-card">
      <el-tab-pane label="标题1" name="1">内容1</el-tab-pane>
      <el-tab-pane label="标题2" name="2">内容2</el-tab-pane>
      <el-tab-pane label="标题3" name="3">内容3</el-tab-pane>
      <el-tab-pane label="标题4" name="4">内容4</el-tab-pane>
    </el-tabs>
  </template>
  <script setup>
  import { ref } from 'vue'
//   import  { TabsPaneContext } from 'element-plus'
  
  const activeName = ref('first')
  
  const handleClick = (tab, event) => {
    console.log(tab, event)
  }
  </script>
  
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>

3.2动态选项卡

<script setup>
import { ref,reactive } from 'vue';
const tab = reactive({
    arr: [
        { name: "1", title: '邓瑞', content: '内容1' },
        { name: "2", title: '邓瑞编程', content: '内容2' },
        { name: "3", title: 'dengruicode.com', content: '内容3' },
    ]
})
const selectedName = ref("2")

//添加
const tabAdd = () => {
    let index = tab.arr.length
    index++

    tab.arr.push({
        name: index,
        title: '新选项卡' + index,
        content: '内容' + index
    })
}

//移除
const tabRemove = (name) => {
    console.log("name:", name)

    const index = tab.arr.findIndex((value) => {
        return value.name === name
    })

    tab.arr.splice(index, 1) //移除元素
}
</script>

<template>
    <h3>动态选项卡</h3>

    <el-button @click="tabAdd">添加</el-button>

    <el-tabs v-model="selectedName" @tab-remove="tabRemove" closable type="card">
        <el-tab-pane v-for="(value, key) in tab.arr" :key="value.name" :label="value.title" :name="value.name">
            {{ value.content }}
        </el-tab-pane>
    </el-tabs>
</template>

<style lang="scss" scoped></style>

tips:ref&reactive

reactive定义麻烦，使用不用加value
ref更通用。使用时得加value
const tab = reactive({
    arr: [
        { name: "1", title: '邓瑞', content: '内容1' },
        { name: "2", title: '邓瑞编程', content: '内容2' },
        { name: "3", title: 'dengruicode.com', content: '内容3' },
    ]
})

4.input框

<div style="width: 300px;"> 给容器设置宽度，就能实现换行了。

<script setup>
import { ref } from 'vue'

const name = ref('')
const password = ref('')
const content = ref('邓瑞编程')
const url = ref('dengruicode.com')
const url2 = ref('dengruicode')
const email = ref('123456')

//const selected = ref('')
const selected = ref('2') //选中的下拉框
</script>

<template>
<div style="width: 300px;">
    <!-- clearable 可一键清空 -->
    <h3>输入框</h3>
    <el-input v-model="name" clearable placeholder="请输入用户名" />

    <!-- show-password 可切换显示隐藏密码 -->
    <h3>密码框</h3>
    <el-input v-model="password" show-password placeholder="请输入密码" />

    <h3>文本域</h3>
    <el-input type="textarea" v-model="content" rows="2" />

    <h3>输入内容长度限制 - 输入框</h3>
    <el-input v-model="name" maxlength="10" show-word-limit />

    <h3>输入内容长度限制 - 文本域</h3>
    <el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />

    <h3>尺寸</h3>
    大 <el-input size="large" />
    默认 <el-input />
    小 <el-input size="small" />

    <h3>前置</h3>
    <el-input v-model="url">
        <template #prepend>https://</template>
    </el-input>

    <h3>后置</h3>
    <el-input v-model="email">
        <template #append>@qq.com</template>
    </el-input>

    <h3>前置后置</h3>
    <el-input v-model="url2">
        <template #prepend>https://</template>
        <template #append>.com</template>
    </el-input>

    <h3>前置后置扩展 - 搜索</h3>
    <el-input placeholder="请输入课程名称">
        <template #prepend>
            <el-select v-model="selected" placeholder="请选择" style="width: 100px;">
                <el-option label="前端" value="1" />
                <el-option label="后端" value="2" />
                <el-option label="服务端" value="3" />
            </el-select>
        </template>
        <template #append>
            <el-button>
                <el-icon><Search /></el-icon>
            </el-button>
        </template>
    </el-input>
</div>
</template>

5.单选&复选框

<script setup>
        import { ref } from 'vue'
        
        //单选框
        const radio = ref("3")
        const radio2 = ref("b")
        const radio3 = ref("C")

        const radioChange = (val) => {
            console.log("radioChange:", val)
        }

        const radioGroupChange = (val) => {
            console.log("radioGroupChange:", val)
        }

        //复选框
        const checked = ref(["1", "2"])
        const checked2 = ref([])

        const checkboxGroupChange = (val) => {
            console.log("checkboxGroupChange", val)
        }
    </script>

    <template>
        <h3>单选框</h3>
        <el-radio v-model="radio" value="1">前端</el-radio>
        <el-radio v-model="radio" value="2">后端</el-radio>
        <el-radio v-model="radio" value="3">服务端</el-radio>

        <h3>单选框 - 事件绑定</h3>
        <el-radio v-model="radio2" value="a" @change="radioChange">前端</el-radio>
        <el-radio v-model="radio2" value="b" @change="radioChange">后端</el-radio>
        <el-radio v-model="radio2" value="c" @change="radioChange">服务端</el-radio>

        <h3>单选框组</h3>
        <el-radio-group v-model="radio3" @change="radioGroupChange">
            <el-radio value="A">前端</el-radio>
            <el-radio value="B">后端</el-radio>
            <el-radio value="C">服务端</el-radio>
        </el-radio-group>

        <h3>复选框</h3>
        <el-checkbox-group v-model="checked">
            <el-checkbox value="1">前端</el-checkbox>
            <el-checkbox value="2">后端</el-checkbox>
            <el-checkbox value="3">服务端</el-checkbox>
        </el-checkbox-group>

        <h3>事件绑定</h3>
        <el-checkbox-group v-model="checked2" @change="checkboxGroupChange">
            <el-checkbox value="1">前端</el-checkbox>
            <el-checkbox value="2">后端</el-checkbox>
            <el-checkbox value="3">服务端</el-checkbox>
        </el-checkbox-group>
    </template>

6.下拉框

<script setup>
        import { ref,reactive } from 'vue'
        
        const selected = ref('2')
        const selected2 = ref('')
        const selected3 = ref('C')
        const selected4 = ref(['1','3'])

        const data = reactive({
            options: [
                { value: 'A', label: '前端', },
                { value: 'B', label: '后端', },
                { value: 'C', label: '服务端', }
            ]
        })

        //回调
        const selectChange = (val) => {
            console.log("selectChange:", val)
        }
    </script>

    <template>
        <div style="width: 300px;">
            <h3>下拉框</h3>
            <el-select v-model="selected" placeholder="请选择">
                <el-option value="1" label="前端" />
                <el-option value="2" label="后端" />
                <el-option value="3" label="服务端" />
            </el-select>

            <h3>下拉框 - 事件绑定</h3>
            <el-select v-model="selected2" @change="selectChange" placeholder="请选择">
                <el-option value="a" label="前端" />
                <el-option value="b" label="后端" />
                <el-option value="c" label="服务端" />
            </el-select>

            <h3>动态下拉框</h3>
            <el-select v-model="selected3" placeholder="请选择">
                <el-option v-for="item in data.options" 
                :value="item.value" 
                :label="item.label"
                :key="item.value" />
            </el-select>

            <h3>多选 - multiple</h3>
            <el-select v-model="selected4" multiple @change="selectChange" placeholder="请选择">
                <el-option value="1" label="前端" />
                <el-option value="2" label="后端" />
                <el-option value="3" label="服务端" />
            </el-select>
        </div>
    </template>

7.所有框合集

<script setup>
        import { ref } from 'vue'

        const data = ref({
            name: '',
            radio: '',
            checkbox: [],
            date: '',
            select: '',
            multipleSelect: [],
            textarea: ''
        })

        const add = () => {
            console.log(data.value)
        }

        const reset = () => {
            data.value = {
                name: '',
                radio: '',
                checkbox: [],
                date: '',
                select: '',
                multipleSelect: [],
                textarea: ''
            }
        }
    </script>

    <template>
        <el-form label-width="80" style="width: 400px;">
            <el-form-item label="文本框">
                <el-input v-model="data.name" placeholder="请填写名称" />
            </el-form-item>

            <el-form-item label="单选框">
                <el-radio-group v-model="data.radio">
                    <el-radio value="1">前端</el-radio>
                    <el-radio value="2">后端</el-radio>
                    <el-radio value="3">服务端</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="复选框">
                <el-checkbox-group v-model="data.checkbox">
                    <el-checkbox value="a">前端</el-checkbox>
                    <el-checkbox value="b">后端</el-checkbox>
                    <el-checkbox value="c">服务端</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="日期时间">
                <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>

            <el-form-item label="下拉框">
                <el-select v-model="data.select" placeholder="请选择">
                    <el-option value="A" label="前端" />
                    <el-option value="B" label="后端" />
                    <el-option value="C" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="多选框">
                <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
                    <el-option value="AA" label="前端" />
                    <el-option value="BB" label="后端" />
                    <el-option value="CC" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="文本域">
                <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">添加</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </template>

8.对话框

在这里插入图片描述

<script setup>
        import { ref } from 'vue'

        const data = ref({
            name: '',
            radio: '',
            checkbox: [],
            date: '',
            select: '',
            multipleSelect: [],
            textarea: ''
        })

        const add = () => {
            console.log(data.value)
        }

        const reset = () => {
            data.value = {
                name: '',
                radio: '',
                checkbox: [],
                date: '',
                select: '',
                multipleSelect: [],
                textarea: ''
            }
        }

        //对话框
        const dialog = ref(false)

        const dialogClose = () => {
            console.log("关闭")
        }
    </script>

    <template>
        <el-button @click="dialog = true">打开</el-button>

        <!-- draggable 允许拖拽 -->
        <el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">
            <el-form label-width="80">
                <el-form-item label="文本框">
                    <el-input v-model="data.name" placeholder="请填写名称" />
                </el-form-item>

                <el-form-item label="单选框">
                    <el-radio-group v-model="data.radio">
                        <el-radio value="1">前端</el-radio>
                        <el-radio value="2">后端</el-radio>
                        <el-radio value="3">服务端</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="复选框">
                    <el-checkbox-group v-model="data.checkbox">
                        <el-checkbox value="a">前端</el-checkbox>
                        <el-checkbox value="b">后端</el-checkbox>
                        <el-checkbox value="c">服务端</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="日期时间">
                    <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>

                <el-form-item label="下拉框">
                    <el-select v-model="data.select" placeholder="请选择">
                        <el-option value="A" label="前端" />
                        <el-option value="B" label="后端" />
                        <el-option value="C" label="服务端" />
                    </el-select>
                </el-form-item>

                <el-form-item label="多选框">
                    <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
                        <el-option value="AA" label="前端" />
                        <el-option value="BB" label="后端" />
                        <el-option value="CC" label="服务端" />
                    </el-select>
                </el-form-item>

                <el-form-item label="文本域">
                    <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="add">添加</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>

    <style scoped>
    
    </style>

9.分页

总列表长度，分了多少页，每页多少行；
导航：向前，向后，转到
当前页
<el-pagination layout="prev, pager, next" :page-size="5" :total="50" @current-change="currentPage" />

10.表格

1.添加边框
2.多选

<script setup>
        import { ref } from 'vue'

        const data = ref({
            arr: [
                { id: '1', name: '邓瑞', web: 'dengruicode.com', date: '2023-06-20' },
                { id: '2', name: 'David', web: 'www.dengruicode.com', date: '2023-06-21' },
                { id: '3', name: 'Luna', web: 'dengruicode.com', date: '2023-06-22' },
                { id: '4', name: 'Lisa', web: 'www.dengruicode.com', date: '2023-06-22' }
            ]
        })

        //选中的复选框
        let idArr = []
        const selected = (data) => {
            //console.log("selected", data)

            idArr = [] //重置

            data.forEach((value) => {
                idArr.push(value.id)
            })

            console.log("idArr:", idArr)
        }

        //删除
        const del = () => {
            console.log("del:", idArr)
        }

        //编辑
        const edit = (index, row) => {
            console.log("index:", index, "row:", row)
        }    
    </script>

    <template>
        <h3>表格</h3>
        <el-table :data="data.arr" style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>带边框表格</h3>
        <el-table :data="data.arr" border style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>设置高度固定表头</h3>
        <el-table :data="data.arr" border height="120" style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>type="selection" 多选</h3>
        <el-table :data="data.arr" border style="width: 800px;">
            <el-table-column type="selection" width="55" />

            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>按钮</h3>
        <el-button type="primary" @click="del">删除</el-button>
        
        <el-table :data="data.arr" @selection-change="selected" border style="width: 900px;margin: 3px 0;">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />

            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />
    </template>

    <style scoped></style>

千门江月

关注

8
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
3.Vue3——自定义组件

什么是组件？h1就是一个组件，就是标签，一个组件具备：组件本身即标签+属性+事件，属性用来提供数据，事件用来提供功能，事件的实现通过组件事先提前封装写好方法。所以，如何写一个简单的组件呢？写一个标签完善该标签的属性和方法，对外提供。——属性props接受外部传入数据 emit向外部传出事件，2者都需要先注册再使用。有些内容是待定的，你只需要固定它的位置，比如一个古诗组件，标题等等都是需要使用时填入，这个时候就需要——使用插槽实现案例1：自定义面板vue组件的生命周期可以分为：创建，挂载，销毁
复制链接

扫一扫