Vue3-element-plus表格

一、element-plus

1.用组件属性实现跳转路由

        
          
            
          
          文章分类
        

2. el-card 组件

  
    
      
        文章分类
        
          添加分类
        
      
    
    ...
  


.page-container {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

考虑到多个页面复用，封装成组件

• props 定制标题

• 默认插槽 default 定制内容主体

• 具名插槽 extra 定制头部右侧额外的按钮

• defineProps({
    title: {
      required: true,
      type: String
    }
  })
  
  
    
      
        
          {{ title }}
          
            
          
        
      
      
    
  

  页面内使用

    
      
         添加分类 
      
      主体部分
    
  

  3.el-表格（重要）

  第一步先调通借口返回数据

  

  第二步封装组件

  

  

  详情看官网

     
    
    
    
      
        
        
      
    
    
      
    
  
  const onEditChannel = (row) => {
    console.log(row)
  }
  const onDelChannel = (row) => {
    console.log(row)
  }

  

  4.封装弹层

  import { ref } from 'vue'
  const dialogVisible = ref(false)
  const open = async (row) => {
    dialogVisible.value = true
    console.log(row)
  }
  defineExpose({
    open
  })
  
  
    
      我是内容部分
      
        
          取消
           确认 
        
      
    
  

  

  

  二、封装公共组件，下拉菜单

  1.新建 article/components/ChannelSelect.vue

  2.页面中导入渲染

  import ChannelSelect from './components/ChannelSelect.vue'
  
    
  

  3.调用接口，动态渲染下拉分类，设计成 v-model 的使用方式

  import { artGetChannelsService } from '@/api/article'
  import { ref } from 'vue'
  defineProps({//子组件接收
    modelValue: {
      type: [Number, String]
    }
  })
  const emit = defineEmits(['update:modelValue'])//提交父组件方法
  const channelList = ref([])//定义数组动态渲染
  const getChannelList = async () => {
    const res = await artGetChannelsService()
    channelList.value = res.data.data
  }
  getChannelList()
  
  
    
      
    
  

  注意：这里一定要使用大驼峰命名，不然会报错

  4.父组件定义参数绑定

  const params = ref({//父组件定义数据
    pagenum: 1,
    pagesize: 5,
    cate_id: '',
    state: ''
  })
  //拆分开就是子组件的updata方法

  vue2和Vue3v-model区别

  在Vue 2和Vue 3中，v-model的使用和行为大体上是相似的，都是用来创建表单输入和应用状态之间的双向数据绑定。不过，随着Vue 3的推出，有一些细微的差别和改进：

  Vue 2 中的 v-model

  1. 基于对象属性：Vue 2 使用 v-model 实现双向绑定时，实际上是在使用 value 属性和 input 事件的一个语法糖。
  2. 组件实现：自定义组件需要定义 value 属性和 input 事件来配合 v-model 的工作。
  3. model 选项：在Vue 2的自定义组件中，可以使用 model 选项来指定一个自定义的事件，而不是默认的 input 事件。

  Vue 3 中的 v-model

  1. 基于 createModel 函数：Vue 3 引入了一个新的 createModel 函数，它允许更灵活的双向绑定实现。
  2. 组件实现改进：自定义组件可以使用 modelValue 属性和 update:modelValue 事件来代替Vue 2中的 value 和 input。
  3. 模板中的变化：在Vue 3的模板中，应该使用 update:modelValue 来监听更新事件，如上一个警告信息所述，这要求使用全小写并用连字符分隔的事件名。
  4. 性能优化：Vue 3中的 v-model 可以利用Vue 3的性能优化，例如通过避免不必要的渲染来提高效率。

  共同点

  • 在两种版本中，v-model 都是用于创建用户输入和应用状态之间的同步。
  • 它们都允许开发者在模板中以一种简洁的方式处理表单输入和应用状态的绑定。

    迁移注意事项

    如果你正在从Vue 2迁移到Vue 3，需要注意以下几点：

    • 确保在Vue 3中将 v-model 的更新事件监听器更改为使用全小写的连字符命名法，如 update:modelValue。
    • 自定义组件可能需要更新以使用新的 modelValue 属性和 update:modelValue 事件。
    • 利用Vue 3的组合式API（如 ref, reactive）来更好地管理响应式状态。

      总的来说，v-model 在Vue 2和Vue 3中的核心概念保持不变，但Vue 3对其进行了一些现代化的改进和优化。

      

       

      三、el-表格（进阶）

      1.封装格式化日期工具函数

      1.新建 utils/format.js 封装格式化日期函数

      import { dayjs } from 'element-plus'
      export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

      2.导入使用 import { formatTime } from '@/utils/format'

      注意这里要用插槽，

       
              
                {{ formatTime(row.pub_date) }}
              
            

      2.分页渲染 [element-plus 分页]

      1.分页组件

      

      

      const onSizeChange = (size) => {
        params.value.pagenum = 1
        params.value.pagesize = size
        getArticleList()
      }
      const onCurrentChange = (page) => {
        params.value.pagenum = page
        getArticleList()
      }

      2.提供分页修改逻辑

      

      loading效果