1. 程式人生 > >vue簡單table

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。