zoukankan      html  css  js  c++  java
  • Element-UI的表格合计行的列添加操作按钮

    我是操作DOM元素的绑定的,如果你有好的方法,欢迎留言。

    需求

     代码

    <div id="app">
            <el-table :data="tableData" show-summary ref="tableRef" style=" 100%">
                <el-table-column prop="id" label="ID" width="180">
                </el-table-column>
                <el-table-column prop="name" sortable label="姓名">
                </el-table-column>
                <el-table-column prop="amount1" sortable label="数值 1">
                </el-table-column>
                <el-table-column prop="amount2" sortable label="数值 2">
                </el-table-column>
                <el-table-column prop="amount3" sortable label="数值 3">
                </el-table-column>
                <el-table-column prop="" sortable label="操作">
                    <template slot-scope="scope">
    
                        <el-button size="mini" type="danger" @click="handle(scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
    
            </el-table>
        </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                tableData: [],
            },
            mounted() {
                this.gettable();
            },
            methods: {
                handle(index, row) {
    
                },
                detail(){
                    
                },
                gettable() {
                    this.tableData = [{
                        id: '12987122',
                        name: '王小虎',
                        amount1: '234',
                        amount2: '3.2',
                        amount3: 10
                    }, {
                        id: '12987123',
                        name: '王小虎',
                        amount1: '165',
                        amount2: '4.43',
                        amount3: 12
                    }, {
                        id: '12987124',
                        name: '王小虎',
                        amount1: '324',
                        amount2: '1.9',
                        amount3: 9
                    }, {
                        id: '12987125',
                        name: '王小虎',
                        amount1: '621',
                        amount2: '2.2',
                        amount3: 17
                    }, {
                        id: '12987126',
                        name: '王小虎',
                        amount1: '539',
                        amount2: '4.1',
                        amount3: 15
                    }];
                }
            },
            watch: {
                tableData: function () {
                    let _this = this;
                    this.$nextTick(() => {
                        debugger;
                        console.log(_this.$refs.tableRef.$refs);
                        let html=_this.$refs.tableRef.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')[5].querySelector('.cell');
                        html.innerHTML = "<button onclick='vm.detail()'>查看</button>";
                    })
                }
            }
        });
    </script>
  • 相关阅读:
    Resample the mask
    高斯消元法
    java中的大数BigInteger
    JAVA中如何使用SORT从大到小排
    Java中Array.sort()的几种用法简明教程 (需要初始化要排序的对象)
    java中两个字符串如何比较大小
    java数组初始化函数
    BestCoder Round #89 Fxx and string
    Flooded!
    基础练习 数列排序
  • 原文地址:https://www.cnblogs.com/-zzc/p/14050974.html
Copyright © 2011-2022 走看看