vue简单table

Posted 2021-01-18 lihan829

之前走了很多弯路，都是因为思路不正（码代码码晕了）。转换一下思路，多简单:

<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。