Vue如何实现表格全选复选框indeterminate半选状态绑定

核心逻辑 #

半选状态indeterminate的判断条件非常直接：

• 已选中条目数大于0
• 已选中条目数小于数据总条数
  同时满足以上两个条件时，全选框展示半选效果。
  注意：indeterminate是checkbox的原生DOM属性，不是普通HTML属性，绑定时必须加.prop修饰符才能正常生效。

代码修改步骤 #

1. 新增半选状态计算属性 #

在原有computed配置中新增isIndeterminate计算属性，专门处理半选状态判断：

computed: {
  selectAll: {
    get: function() {
      return this.messages ? this.selected.length == this.messages.length : false;
    },
    set: function(value) {
      var selected = [];
      if (value) {
        this.messages.forEach(function(item) {
          selected.push(item.id);
        });
      }
      this.selected = selected;
    }
  },
  // 新增半选判断逻辑
  isIndeterminate() {
    return this.selected.length > 0 && this.selected.length < this.messages.length
  }
},

2. 给表头全选框绑定半选属性 #

修改表头的checkbox元素，添加:indeterminate.prop绑定：

<th><input type="checkbox" v-model="selectAll" :indeterminate.prop="isIndeterminate"></th>

完整可运行代码 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <table class="table">
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll" :indeterminate.prop="isIndeterminate"></th>
        <th>Status</th>
        <th>Message</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in messages">
        <td><input type="checkbox" v-model="selected" :value="item.id"></td>
        <td>{{ item.status }}</td>
        <td>{{ item.text }}</td>
      </tr>
    </tbody>
  </table>
</div>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

new Vue({
  el: "#app",
  data: {
    selected: [],
    messages: [{
        id: 1,
        text: "Learn JavaScript",
        status: 'read'
      },
      {
        id: 2,
        text: "Learn Vue",
        status: 'unread'
      },
      {
        id: 3,
        text: "Play around in JSFiddle",
        status: 'read'
      },
      {
        id: 4,
        text: "Build something awesome",
        status: 'unread'
      }
    ]
  },
  computed: {
    selectAll: {
      get: function() {
        return this.messages ? this.selected.length == this.messages.length : false;
      },
      set: function(value) {
        var selected = [];
        if (value) {
          this.messages.forEach(function(item) {
            selected.push(item.id);
          });
        }
        this.selected = selected;
      }
    },
    isIndeterminate() {
      return this.selected.length > 0 && this.selected.length < this.messages.length
    }
  },
})

注：原代码中给<a>标签绑定v-model是无效写法，v-model仅支持表单元素与自定义组件，已在完整代码中移除该无效片段。

内容的提问来源于stack exchange，提问作者kralyolda