[email protected] 表格

<template>
    <section>
        <el-row>
            <el-col :span="16">
                <!--表單-->
                <h3>{{setedList.length}}</h3>
                <table cellspacing="0" style="width:100%;" class="table-my">
                    <thead>
                        <tr>
                            <th>
                                <el-checkbox v-model="checkedAll" @change="handleCheckedAll">序號</el-checkbox>
                            </th>
                            <th>日期</th>
                            <th>姓名</th>
                            <th>地址</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,number) in tableData" :key="number" :class="{checked:item.checked}">
                            <td>
                                <el-checkbox v-model="item.checked" @change="handleChecked(item)">
                                    {{number+1}}
                                </el-checkbox>

                            </td>
                            <td>{{item.date}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.address}}</td>
                        </tr>

                    </tbody>
                </table>

                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="5" layout="prev, pager, next, jumper" :total="17">
                    </el-pagination>
                </div>
            </el-col>
            <el-col :span="8">
                <ul style="background:#eee;">
                    <!-- <li v-for="(e,i) in setedList" :key="i"></li> -->
                    <li v-for="(e,i) in setedList" :key="i" style="heighet:90px;background:skyblue;border:1px solid red">
                        <p>{{i+1}}</p>
                        <p style="padding:5px;"><input type="text" v-model="e.name" style="padding:5px;"></p>
                        <p style="padding:5px;"><input type="text" v-model="e.address" style="padding:5px;"></p>
                        <p style="padding:5px;"><input type="text" v-model="e.date" style="padding:5px;"></p>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </section>
</template>
<script type="text/ecmascript-6">
const ERR_OK = "000";
export default {
    data() {
        return {
            checkedAll: false,
            checked: false,
            formInline: {
                user: {
                    name: '',
                    date: '',
                    address: [],
                    place: ''
                }
            },
            tableData: [],
            options: [],
            places: [],
            dialogFormVisible: false,
            editLoading: false,
            form: {
                name: '',
                address: '',
                date: '',
            },
            currentPage: 1,
            table_index: 999,
            setedList: [],
            list: []
        };
    },
    created() {
        this.$http.get('/api/getTable').then((response) => {
            response = response.data;
            if (response.code === ERR_OK) {
                //   this.tableData = response.datas;
                var datas = response.datas;

                for (var index = 0; index < datas.length; index++) {

                    datas[index].checked = false;
                    //   console.log(datas[index].checked)
                }
                this.tableData = datas;

            }
        });
        this.$http.get('/api/getOptions').then((response) => {
            response = response.data;
            if (response.code === ERR_OK) {
                this.options = response.datas;
                this.places = response.places;
            }
        });
    },
    methods: {

        handleCheckedAll() {//-----------全選
            var temp = []
            if (this.checkedAll) {
                this.list = [];
                for (var i = 0; i < this.tableData.length; i++) {
                    this.tableData[i].checked = true;
                    temp.push(this.tableData[i]);
                }
                this.list = temp;
                for (var j = 0; j < temp.length; j++) {
                    for (var k = 0; k < this.setedList.length; k++) {
                        if (temp[j].name == this.setedList[k].name) {
                            temp.splice(j, 1)
                        }
                    }

                }
                for (var l = 0; l < temp.length; l++) {
                    this.setedList.push(temp[l]);
                }

            } else {
                this.list = [];
                for (var i = 0; i < this.tableData.length; i++) {
                    this.tableData[i].checked = false;
                    temp.push(this.tableData[i]);
                }
                for (var j = 0; j < temp.length; j++) {
                    for (var k = 0; k < this.setedList.length; k++) {
                        if (temp[j].name == this.setedList[k].name) {
                            this.setedList.splice(k, 1)
                        }
                    }

                }
            }

        },
        handleChecked(item) {//單選--------------
            if (item.checked) {
                item.checked = true;
                this.setedList.push(item);
            } else {
                item.checked = false;
                if (this.list.length < 2) {
                    this.list = [];
                    for (var j = 0; j < this.setedList.length; j++) {
                        if (item.name == this.setedList[j].name) {
                            this.setedList.splice(j, 1)
                        }
                    }

                } else {

                    for (var j = 0; j < this.setedList.length; j++) {
                        if (item.name == this.setedList[j].name) {
                            this.setedList.splice(j, 1)
                        }
                    }

                }
            }

        },
        handleSizeChange(val) {
            console.log(`每頁 ${val} 條`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            console.log(`當前頁: ${val}`);
            this.checkedAll = false;
            console.log(this.list);
            this.$http.get('/api/getTable').then((response) => {
                response = response.data;
                if (response.code === ERR_OK) {
                    var datas = response.datas;
                    for (var index = 0; index < datas.length; index++) {

                        datas[index].checked = false;

                    }
                    this.tableData = datas;

                }
            });
        },


    }
};
</script>
<style lang="less" scoped>
.table-my {
    border-collapse: collapse;
    margin: 0 auto;
    width: 500px;
    th,
    td {
        padding: 0;
        border: 1px solid #c0c4cc;
        font: 20px/50px "微軟雅黑";
        text-align: center;
    }
    .checked{
        background: skyblue;
    }
}
</style>