Vue3-封装table组件

在使用ant-design-vue中曾经使用过table组件，所以想着自己封装一个组件尝试一下，这是一个简易版本

1. 相关知识点

• 组件传值
• 插槽(具名插槽、作用域插槽)
• vue3 setup
• vant v3 部分组件使用

2.封装子组件，按照要求规定参数

封装一个名为Ttablede组件，该组件接收两个参数，分别是columns和dataSource

2.1 子组件：接收参数，按数据提取动态具名插槽名

子组件：接收父组件传入的参数，并将传入的参数进行处理，提取出slot插槽值，用于动态设置具名插槽

import {computed, defineProps} from "vue";
// 接收参数 columns，dataSource
const props = defineProps({
  columns: {
    type: Array
  },
  dataSource: {
    type: Array
  }
})
// 提取slot属性，用于设置具名插槽
ref: columnSlot = computed(() => {
  const filterColumns = props.columns.length && props.columns.map((v) => {
    return v.slot
  })
  return filterColumns
})

2.2 父组件：定义数据源column、dataSource，传给子组件

2.2.1 column数据结构

const columns = [
  {
    title: '变化信息',
    key: 'changeMsg',
    slot: 'changeMsg',
  },
  {
    title: '当前出价',
    key: 'currentPrice',
    slot: 'currentPrice',
  },
  {
    title: '最低出价',
    key: 'lowestPrice',
    slot: 'lowestPrice',
  },
  {
    title: '最高出价',
    key: 'highestPrice',
    slot: 'highestPrice',
  },
]

2.2.2 dataSource数据结构

const dataList = [
  {
    changeMsg:'课程词1',
    currentPrice:'1.11',
    lowestPrice:'0.01',
    highestPrice:'2.35',
  },
  {
    changeMsg:'课程词2',
    currentPrice:'2.22',
    lowestPrice:'1.01',
    highestPrice:'3.35',
  },
  {
    changeMsg:'课程词3',
    currentPrice:'3.33',
    lowestPrice:'3.01',
    highestPrice:'2.35',
  },
]

2.2.3 传值给子组件

3.子组件处理数据

3.1 处理表头header

    
    

      
{{ item.title }}
    

3.2 处理表单内容项

    
    

      
 
           // name动态设置具名插槽，content对应的数据传给外部父组件
      
    

3.3 父组件使用

4.完整代码

4.1 TTable完整代码

4.2 组件的使用

    
      
      
      
      
    

其中columns可以自定义，dataList可以通过网络请求获取

import TTable from '../../components/common/TTable.vue';

4.呈现效果

样式可以根据需求进行调整

5.扩充功能

5.1 cell值修改

如上图所示，我们想要对蓝色部位进行动态修改，点击蓝色，可以编辑，失去焦点，保存内容并发送网络请求，对父组件代码进行修改

5.1.1 扩充后的效果

点击红框

修改红框的值

点击其他位置，令其失去焦点

如果觉得上述情况下，无法直接弹出键盘，也可以直接封装一个指令，在mounted时，获取焦点即可

5.2 增加loading效果

增加一个选项loading

  loading:{
    type:Boolean,
    default:false,
  }

根据传入的loading值，判断展示列表还是loading选项

外部传入的loading可以根据网络请求进行判断，若发送网络请求中，loading值传true，网络请求结束/出错，loading传false try…catch…finally 可以实现这种判断情形。

5.2.1 扩充后效果

加载数据时效果

数据加载结束后的效果

如果有帮助的话，点个赞呗~
商用转载请标明来源哦~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~