vue簡單table

之前走了很多彎路，都是因為思路不正（碼代碼碼暈了）。轉換一下思路，多簡單:

<template>
    <table class="basic-table">
        <thead>
            <tr>
                <th><el-checkbox @change="allSelectedChange"/></th>
                <th v-for="(column, cindex) in columns" :key="cindex">{{column.text}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(row, rindex) in rows" :key="rindex">
                <td><el-checkbox v-model="selectedByIndex[rindex]" /></td>
                <td v-for="(column, cindex) in columns" :key="cindex">{{row[column.dataIndex]}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
export default {
  props: {
    columns: Array,
    rows: Array
  },
  data: function() {
    return {
      selectedByIndex: []
    };
  },
  methods: {
    allSelectedChange: function(selected) {
      this.selectedByIndex = this.rows.map(r => selected);
    }
  },
  computed: {}
};
</script>
<style lang="less">
</style>

 期間發現element-ui的checkbox組件在使用:checked屬性的時候有問題，簡單說就是有時data改變了，頁面上的元素沒有重新render，換用原生的input標簽就可以正常使用:checked屬性。感覺原生的input還是不夠美觀，還是換回element-ui的checkbox，不過這次在這里想辦法使用v-model屬性，就一切都又正常了。目前還沒發現是什么原因引起用:checked有時無法重新render。