Vue开发05：Vue中Ant-design主要控件用法demo(js为主)

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>