Ant-design主要控件事件总结
在线测试网站：在线运行Vue组件 (rscl.cc)
以下demo全部基于ant-design-vue组件（版本1.7.8）
一、下拉框
1.选项直接赋值（$event）
用下面这个技巧，可以不写methods，注意如果需要打印要写成 this.SelectedValue.val
<template><div><!-- a-select 选择框 --><a-select @change="selectedValue = $event" placeholder="请选择一个选项" style="width: 200px;"><a-select-option value="apple">苹果</a-select-option><a-select-option value="banana">香蕉</a-select-option><a-select-option value="cherry">樱桃</a-select-option></a-select><!-- p 标签展示选择的内容 --><p>你选择的水果是: {{ selectedValue }}</p></div>
</template><script>
export default {data() {return {// 用来保存选择的值selectedValue: ''};}
};
</script><style scoped>
/* 样式可以根据需要调整 */
</style>
麻烦点也可以写成一个方法：
methods: {handleChange(event) {const selectedValue = event.target.value;//通过事件获取变化的目标值this.message = selectedValue === '第一个' ? '点击了第一个' : '点击了第二个';}}
2.三联动
<template><a-row><a-col :span="8"><a-select v-model="selectedCountry" @change="onCountryChange" placeholder="请选择国家" style="width: 100px;" allow-clear><a-select-option v-for="country in uniqueCountries" :key="country" :value="country">{{ country }}</a-select-option></a-select></a-col><a-col :span="8"><a-select v-model="selectedDistrict" @change="onDistrictChange" placeholder="请选择地区" style="width: 100px;" allow-clear><a-select-option v-for="district in filteredDistricts" :key="district" :value="district">{{ district }}</a-select-option></a-select></a-col><a-col :span="8"><a-select v-model="selectedSchool" @change="onSchoolChange" placeholder="请选择学校" style="width: 100px;" allow-clear><a-select-option v-for="school in filteredSchools" :key="school" :value="school">{{ school }}</a-select-option></a-select></a-col></a-row>
</template><script>
export default {data() {return {selectedCountry: null,selectedDistrict: null,selectedSchool: null,originalData: [{ country: "中国", district: "北京市", school: "北京大学" },{ country: "中国", district: "上海市", school: "复旦大学" },{ country: "美国", district: "马萨诸塞州", school: "哈佛大学" }],uniqueCountries: [],filteredDistricts: [],filteredSchools: []};},methods: {onCountryChange() {this.selectedDistrict = null; // 重置地区和学校选择this.selectedSchool = null;this.queryset();},onDistrictChange() {this.selectedSchool = null; // 重置学校选择this.queryset();},onSchoolChange() {this.queryset();},queryset() {let filteredData = this.originalData;if (this.selectedCountry) {filteredData = filteredData.filter(item => item.country === this.selectedCountry);}if (this.selectedDistrict) {filteredData = filteredData.filter(item => item.district === this.selectedDistrict);}if (this.selectedSchool) {filteredData = filteredData.filter(item => item.school === this.selectedSchool);}this.uniqueCountries = [...new Set(filteredData.map(item => item.country))];this.filteredDistricts = [...new Set(filteredData.map(item => item.district))];this.filteredSchools = [...new Set(filteredData.map(item => item.school))];}},mounted() {this.queryset(); // 初始化调用}
};
</script>二、按钮
1.开关功能
<template><div><!-- 切换加载状态按钮 --><a-button @click="isLoading = !isLoading">{{ isLoading ? '停止加载' : '开始加载' }}</a-button><!-- 切换按钮C启用/禁用状态 --><a-button @click="isEnabled = !isEnabled">{{ isEnabled ? '禁用按钮 C' : '启用按钮 C' }}</a-button><!-- 控制是否显示按钮 C --><a-button @click="showButtonC = !showButtonC">{{ showButtonC ? '隐藏按钮 C' : '显示按钮 C' }}</a-button><!-- 只有在 showButtonC 为 true 时才渲染按钮 C --><a-button v-if="showButtonC" :disabled="!isEnabled" :loading="isLoading">按钮 C</a-button></div>
</template><script>
export default {data() {return {isLoading: false, // 控制按钮 C 的加载状态isEnabled: true, // 控制按钮 C 的启用/禁用状态showButtonC: true // 控制按钮 C 的显示/隐藏};}
};
</script>
<template><div id="app"><!-- 第一个按钮：点击后改变第二个按钮的颜色 --><a-button type="primary" @click="isChanged = !isChanged">点击我改变颜色</a-button><!-- 第二个按钮：颜色会根据点击情况变化 --><a-button :id="'button2'" :style="isChanged ? { backgroundColor: 'red', color: 'black' } : { backgroundColor: 'gray', color: 'white' }" type="default">第二个按钮</a-button></div>
</template><script>
export default {data() {return {// 用来控制样式切换的布尔值isChanged: false};}
};
</script>
三、CheckBox
1.全选
<template><div><div><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">Check all</a-checkbox></div><br /><a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" /></div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
export default {data() {return {checkedList: defaultCheckedList,indeterminate: true,checkAll: false,plainOptions,};},methods: {onChange(checkedList) {this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;this.checkAll = checkedList.length === plainOptions.length;},onCheckAllChange(e) {Object.assign(this, {checkedList: e.target.checked ? plainOptions : [],indeterminate: false,checkAll: e.target.checked,});},},
};
</script>四、时间
1.早晚判断
不允许结束时间比开始时间还早，否则清空
<template><div id="app"><h1>时间选择器</h1><label for="startTime">开始时间:</label><input type="datetime-local" id="startTime" v-model="startTime" @change="checkTime" /><label for="endTime">结束时间:</label><input type="datetime-local" id="endTime" v-model="endTime" @change="checkTime" /></div>
</template><script>
export default {data() {return {startTime: '',endTime: ''};},methods: {checkTime() {if (this.startTime && this.endTime) {if (new Date(this.startTime) > new Date(this.endTime)) {this.startTime = '';this.endTime = '';}}}}
};
</script>五、表格
1.增删改查表格(v-for v-if @click 传参)
<template><div><table><thead><tr><th>ID</th><th>Name</th><th>Age</th><th>Score</th><th>Actions</th></tr></thead><tbody><tr v-for="(item, index) in items" :key="index"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td>{{ item.score }}</td><td><button @click="showId(item.id)">获取ID</button><button @click="showScore(item.score)">获取分数</button></td></tr></tbody></table><p v-if="selectedId">选中的ID: {{ selectedId }}</p><p v-if="selectedScore !== null">选中的分数: {{ selectedScore }}</p></div>
</template><script>
export default {data() {return {items: [{ id: 1, name: 'Alice', age: 20, score: 85 },{ id: 2, name: 'Bob', age: 22, score: 90 },{ id: 3, name: 'Charlie', age: 23, score: 88 },{ id: 4, name: 'David', age: 21, score: 92 },{ id: 5, name: 'Eva', age: 24, score: 95 }],selectedId: null,selectedScore: null};},methods: {showId(id) {this.selectedId = id;this.selectedScore = null; // 清除选中的分数},showScore(score) {this.selectedScore = score;this.selectedId = null; // 清除选中的ID}}
};
</script><style scoped>
table {width: 100%;border-collapse: collapse;
}
th, td {border: 1px solid #ddd;padding: 8px;text-align: left;
}
th {background-color: #f2f2f2;
}
</style>
语法总结：
item代表元素，index代表索引，如果有id，优先选择 item.id 作为key！其次可以选择index作为key~
<tr v-for="(item, index) in items" :key="index">
<tr v-for="(item, index) in items" :key="item.id">2.增删改查表格(slot插槽)
<template><a-table :data-source="tableData" :columns="columns" rowKey="id"><!-- 使用 slot 定义操作列 --><template slot="action" slot-scope="text, record"><a-button @click="handleEdit(record)" size="small" type="primary">编辑</a-button><a-button @click="handleDelete(record)" size="small" type="danger">删除</a-button></template></a-table>
</template><script>
export default {data() {return {tableData: [{ id: 1, name: '张三', age: 24 },{ id: 2, name: '李四', age: 30 },{ id: 3, name: '王五', age: 28 },],columns: [{ title: 'ID', dataIndex: 'id' },{ title: '名称', dataIndex: 'name' },{ title: '年龄', dataIndex: 'age' },{title: '操作',// 定义操作列的插槽dataIndex: 'action',scopedSlots: { customRender: 'action' }}]};},methods: {handleEdit(record) {this.$message.info(`编辑 ${record.name}`);},handleDelete(record) {this.$message.info(`删除 ${record.name}`);}}
};
</script>