ant design vue 3.2使用小结

ant design vue 3.2使用小结

Table

嵌套子表格

嵌套子表格时，默认的子表展开icon【+】是在第一列的，如果想改变其位置，只需要在列定义的colums中追加对应列，列内容为：Table.EXPAND_COLUMN
例如把展开icon放在最后一列，

const columns = [
    { title:‘Name’, dataIndex: 'name', key: 'name', className: 'thChange', width: 400 },
    { title: ’Platform‘, dataIndex: 'platform', key: 'platform', className: 'thChange', width: 400 },
    { title: ‘Version’, dataIndex: 'version', key: 'version', className: 'thChange', width: 550 }, 
    Table.EXPAND_COLUMN
];

组件间传递参数

父组件⇒子组件

使用props（单项绑定）
子组件中，显式声明它所接受的 props ：
Son.vue

const props = defineProps({
    param1: String，
    param2: {
    	type: String,
    	required: true
    },
    prame3: {
    	type: Number,
    	default: 10
    }
})

父组件中，对子组件propss中的属性进行绑定
Father.vue

//动态绑定
<Son :param1="Var1" :param2="Var2"> </Son>
<Son :param1="Var1 + 'and ' + Va3" :param2="Var2"> </Son>
//静态值
<Son param1="title" param2="name"> </Son>

子组件 ⇒ 父组件

使用emit触发事件

单个参数

子组件 Son.vue

<script setup lang="ts">
......
//声明触发的事件
const emits = defineEmits(["returnParametes"])
......
//执行触发
emits("returnParametes'", returnValue)
</script>

父组件 Father.vue

<template>
......
//指定触发事件的处理函数
<Son @returnParameters="getDataFromSon"> </Son>
......
<template>
<script setup lang="ts">
.....
const getDataFromSon = (param1: String) => {
	//param1 就是从子组件传递来的returnValue
}
.....
</script>

传递多个参数

子组件Son.vue

emits("returnParametes'", returnValue1， returnValue2,  returnValue3)

父组件Father.vue

<template>
......
//指定触发事件的处理函数
<Son @returnParameters="getDataFromSon(params)"> </Son>
......
<template>
<script setup lang="ts">
.....
const getDataFromSon = (params: Array) => {
	//params[0]  = returnValue1  params[1] = returnValue2    params[2] = returnValue3
}
.....
</script>

v-model双向绑定

子组件 Son.vue

<script setup lang="ts">
......
const props = defineProps({
    param1: String  
})
//声明触发的事件
//update后的参数名一定要和props的声明保持一致
const emits = defineEmits(["update: param1"])
......
//param1的值需要变更的场合, 触发更新事件
emits("update: param1", 变更后的值)
</script>

父组件Father.vue

//Var1既是输入参数也是输出参数，子组件中调用emits触发更新事件的场合，变量Var1的值随之变化
<Son v-model:param1="Var1"> </Son>

变更组件内部的式样-:deep 式样渗透