VUE Element 动态表格

深藏阁楼爱情的钟 2022-11-29 11:51 219阅读 0赞

**合并单元格，注意被抹去的单元格，需： return \{ rowspan: 0, colspan: 0\};**

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>VUE Element 动态表格</title>
    
            
            
    
            <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
            
            <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    
            
            <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
            <style>
                .el-input__inner {
                    border: 0px solid #dcdfe6;
                    text-align: center;
                }
                .el-table {
                    border: 1px solid #000000;
                }
                .el-table td {
                    height: 25px;
                }
                .el-table td {
                    border-bottom: 1px solid #000000;
                    border-right: 1px solid #000000;
                }
    
                .el-table td,
                .el-table th {
                    padding: 0px 0;
                }
            </style>
        </head>
        <body>
            <div id="app">
                
    
                <el-row style="margin-bottom: 10px;">
                    <el-button type="success" @click="addRow">添加1行</el-button>
                    <el-button type="success" @click="addColumn">添加1列</el-button>
                    <el-button type="success" @click="calTotal">计算CYL</el-button>
                    <el-button type="success" @click="showData">显示数据</el-button>
                    <el-button type="success" @click="showProp">显示结构</el-button>
                    <el-button type="success" @click="location.reload()">刷新</el-button>
                </el-row>
    
                
    
                <el-table
                    :data="tableData"
                    :span-method="objectSpanMethod"
                    :show-header="false"
                    :border="true"
                    style="width: 100%;"
                >
                    <template v-for="(item,index) in tableColumn">
                        <el-table-column :prop="item.prop" :label="item.prop">
                            <template slot-scope="scope">
                                <template
                                    v-if="scope.$index < 5 || (item.prop === '0') || scope.$index === tableData.length - 1"
                                >
                                    <h3 style="text-align: center;">
                                        {
       {scope.row[item.prop]}}
                                    </h3>
                                </template>
                                <template v-else>
                                    <el-input
                                        :type="'number'"
                                        :placeholder="''"
                                        v-model="scope.row[item.prop]"
                                        @change="calTotal"
                                    ></el-input>
                                </template>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </div>
    
            <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                        tableColumn: [
                            { prop: '0' },
                            { prop: '1' },
                            { prop: '2' },
                            { prop: '3' },
                            { prop: '4' },
                            { prop: '5' },
                            { prop: '6' },
                            { prop: '7' },
                            { prop: '8' },
                            { prop: '9' },
                            { prop: '10' },
                        ],
                        tableData: [],
                    },
                    methods: {
                        addRow() {
                            this.delTotal();
                            // 添加行
                            const dataLength = this.tableData.length;
                            const SPH = (dataLength - 5) * 0.25;
                            const newData = { '0': SPH };
                            this.tableColumn.forEach((item, index) => {
                                if (index > 0) {
                                    newData[item.prop] = 0;
                                }
                            });
                            this.tableData.push(newData);
    
                            this.calTotal();
                        },
                        addColumn() {
                            // 添加列
                            const maxProp = this.tableColumn[this.tableColumn.length - 1].prop;
                            const prop = Number(maxProp) + 1;
                            this.tableColumn.push({ prop });
                            this.changeCYL();
                            this.tableData.forEach((item, index) => {
                                if (index > 4) {
                                    item[prop] = 0;
                                }
                            });
                        },
                        calTotal() {
                            this.delTotal();
    
                            const totalData = { isTotal: true };
    
                            this.tableColumn.forEach((item, index) => {
                                if (index === 0) {
                                    totalData[item.prop] = '计';
                                } else {
                                    let total = 0;
                                    this.tableData.forEach((dataItem, indexData) => {
                                        if (indexData > 4) {
                                            total += Number(dataItem[item.prop]);
                                        }
                                    });
                                    totalData[item.prop] = total;
                                }
                            });
    
                            this.tableData.push(totalData);
                        },
                        delTotal() {
                            const dataLength = this.tableData.length;
    
                            const lastData = dataLength > 0 ? this.tableData[dataLength - 1] : null;
    
                            if (lastData !== null && lastData.isTotal) {
                                // 删除最后1个数据：总计
                                this.tableData.pop();
                            }
                        },
                        showData() {
                            console.table(JSON.parse(JSON.stringify(this.tableData)));
                            this.$alert(
                                '<textarea style="width:100%;height:200px">' +
                                    JSON.stringify(this.tableData) +
                                    '</textarea>',
                                '表格数据',
                                {
                                    dangerouslyUseHTMLString: true,
                                    confirmButtonText: '确定',
                                }
                            );
                        },
                        showProp() {
                            console.table(JSON.parse(JSON.stringify(this.tableColumn)));
                            this.$alert(
                                '<textarea style="width:100%;height:200px">' +
                                    JSON.stringify(this.tableColumn) +
                                    '</textarea>',
                                '表格结构',
                                {
                                    dangerouslyUseHTMLString: true,
                                    confirmButtonText: '确定',
                                }
                            );
                        },
                        changeCYL() {
                            const CYL = {};
                            this.tableColumn.forEach((item) => {
                                if (item.prop === '0') {
                                    CYL[item.prop] = 'SPH(-)';
                                } else {
                                    CYL[item.prop] = (Number(item.prop) - 1) * 0.25;
                                }
                            });
                            this.tableData[4] = CYL;
                        },
                        // 跨行跨列，特别注意：被抹去的单元格 需 return 0 0
                        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                            if (rowIndex <= 1) {
                                return {
                                    rowspan: 1,
                                    colspan: this.tableColumn.length,
                                };
                            } else if (rowIndex === 2) {
                                if (columnIndex < 2) {
                                    return {
                                        rowspan: 1,
                                        colspan: 2,
                                    };
                                }
                            } else if (rowIndex === 3) {
                                if (columnIndex === 0) {
                                    return {
                                        rowspan: 2,
                                        colspan: 1,
                                    };
                                } else if (columnIndex === 1) {
                                    return {
                                        rowspan: 1,
                                        colspan: this.tableColumn.length - 1,
                                    };
                                }
                            } else if (rowIndex === 4) {
                                if (columnIndex === 0) {
                                    return {
                                        rowspan: 0,
                                        colspan: 0,
                                    };
                                }
                            }
                        },
                        initTableData() {
                            this.tableData.push({
                                '0': '完美世界',
                            });
                            this.tableData.push({
                                '0': '1.61防蓝光。。。近视库存',
                            });
                            this.tableData.push({
                                '0': '镜片规格：',
                                '1': '1.61防蓝光。。。',
                                '2': '镜片等级：',
                                '3': '合格品',
                                '4': '总数：',
                                '5': '173423',
                                '6': '单位：',
                                '7': '付',
                            });
                            this.tableData.push({
                                '0': 'SPH(-)',
                                '1': 'CYL(-)',
                            });
                            this.changeCYL();
                            for (let index = 0; index < 5; index++) {
                                this.addRow();
                            }
                        },
                    },
                    created() {
                        this.initTableData();
                    },
                });
            </script>
        </body>
    </html>