VUE Element 动态表格

最新推荐文章于 2024-08-19 11:11:50 发布
大熊猫玩菜刀
最新推荐文章于 2024-08-19 11:11:50 发布
阅读量620
点赞数
分类专栏： vue 文章标签： table element vue
本文链接：https://blog.csdn.net/u013727805/article/details/108121325
版权
vue 专栏收录该内容
14 篇文章 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/dist/vue.js"></script> -->

        <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-divider>模拟数据</el-divider> -->

            <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-divider>动态表格</el-divider> -->

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