Web开发：Vue中各类控件的常见用法及其关键事件小结

一、checkbox

【全选按钮】

<template>
  <div id="checkboxs">
    <label>
      <input id="selectAll" type="checkbox" v-model="selectAllChecked" @change="selectAllItems">
      全部
    </label>
    <label v-for="(item, index) in options" :key="index">
      <input type="checkbox" v-model="checkedItems" :value="item">
      {{ item }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAllChecked: false, // 是否全选
      checkedItems: [], // 已选中的项
      options: [ // 可选项
        'A',
        'B',
        'C',
        'D'
      ]
    };
  },
  methods: {
    selectAllItems() {
      if (this.selectAllChecked) {
        // 如果全选复选框被选中，则将所有选项都加入到 checkedItems 数组中
        this.checkedItems = [...this.options];
      } else {
        // 否则清空 checkedItems 数组
        this.checkedItems = [];
      }
    }
  },
  watch: {
    // 监听 checkedItems 数组的变化
    checkedItems: function(newVal) {
      // 根据已选中的数量来判断是否要勾选全选复选框
      this.selectAllChecked = newVal.length === this.options.length;
    }
  }
};
</script>

总结一下：

1.v-model具有双向绑定数据的功能

例如：

<input id="selectAll" type="checkbox" v-model="selectAllChecked" @change="selectAllItems">
this.selectAllChecked = 1

可以使得该按钮被选中

再例如：

<label v-for="(item, index) in options" :key="index">
      <input type="checkbox" v-model="checkedItems" :value="item">
      {{ item }}
    </label>
this.checkedItems = [...this.options]

[...this.options]的内容（例如为['A','B']），通过赋值给this.checkedItems可以使得A和B两个选项被选中。

2.watch可以监控v-model对应的控件的状态变化情况

例如：

watch: {
    // 监听 checkedItems 数组的变化
    checkedItems: function(newVal) {
      // 根据已选中的数量来判断是否要勾选全选复选框
      this.selectAllChecked = newVal.length === this.options.length;
    }

可以监听v-model为 checkedItems的控件的状态

3.@change是监听器，可以监听空间的变化，从而调用指定的方法

二、按钮Button

【跳转链接】

<button @click="toNewPage">进入管理界面</button>

//method中写以下方法：
    toNewPage() {
        this.$router.push({
          path: '/page/index'
        })
      }

三、Combobox

【下拉框选中/值变化事件】（Ant-design）

<a-form-item :label="selectLabel">
  <a-select
    v-model="selectedValue" 
    @select="handleSelect"
    @change="handleChange"
  >
    <a-select-option v-for="item in sysList" :key="item.value" :value="item.value">
      {{ item.label }}
    </a-select-option>
  </a-select>
</a-form-item>


<script>
data() {
  return {
    sysList: [], // 下拉列表数据
    selectedValue: null, // 选中的值
    selectLabel: '选择系统', // 下拉框标签
    selectMode: 'default' // 下拉框模式，可根据需要调整
  }
},
  mounted() {
    this.getSysList()//初始化函数
  },
methods: {
  getSysList() {
    axios.get(this.dictUrl).then((res) => {  //后端数据填充进组合框

      this.sysList = res.data.result  // 假设存在两个字段：label value,更新到下拉框中
      var newarray= res.data.result
      // 初始化选中的值
      if (newarray.length > 0) 
      {
        this.selectedValue = newarray[0].value // 默认选中第一个值
      } 
      else {
        this.selectedValue = null // 如果没有数据，确保清空选中值
      }
      
    })
  },
  handleSelect(value) {
    // 处理选择事件
  },
  handleChange(value) {
    // 处理值变化事件
    this.selectedValue = value  //值变化时，锁住对应值的下拉框
  }，
  query(){
      var datas = this.selectedValue // 打印选择框的值(即后端传来this.sysList的value)
  }
}
</script>

四、模态框

案例介绍：
①用isModalVisible控制其是否显示（注意visible前面有冒号,是动态绑定的），需要在data(){return{}}中声明
②在methods:{}中写保存方法（save）和取消方法（handleCancel）

<a-modal :visible="isModalVisible" ref="modal" title="菜单组件管理" @cancel="handleCancel" @ok="save">
        <a-tree
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @expand="onExpand"
          @select="onSelect"
        />
</a-modal>

五、其他小记

【组件渲染】v-if使用

<div class="xxx" v-if="loadData">
           {{loadData.Name}}
</div>

 【备注】

        注意 loadData需要在data(){}中声明，应为全局变量

【元素动态递增id】:id

<label v-for="(item, index) in options" :key="index">
        <input type="checkbox" v-model="checkedItems" :value="item" :id="ki(index)">
         {{ item }}
</label>

methods: {
    ki: function (i) {
       return 'checkbox' + i
    }
}

• input标签的value：就是options数组遍历的值
• input标签的id：就是checkbox0 checkbox1.....  （通过ki方法实现）