选中该列，

然后，在编辑栏中输入你想要输入的数据，再按下CTRL+回车键，

那么，这一列都会显示相同数据

选中这一列 然后在选中的状态下输入你要的东西 再按Ctrl+Enter

 

 

 

 

 



 

场景

el-table中的每列显示的是数字，需要在表格的最下面一行添加汇总行，计算每列的总和。

el-table自带是否显示汇总行这个属性。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi 

关注公众号

霸道的程序猿

获取编程相关电子书、教程推送与免费下载。

实现

属性声明如下



 

找到要添加汇总行小计行的el-table

<el-table v-loading="loading" :data="kqtjList"  show-summary="true">

设置shoe-summary为true



 

但是如果列比较多有滚动条出现的话就会出现上面那种合计行在滚动条

解决办法

打开此vue页面添加一些样式

<style>

.el-table {
  overflow-x: auto;
}
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
  overflow: visible;
}
.el-table::after {
  position: relative;
}
.el-table--scrollable-x .el-table__body-wrapper {
  overflow: visible;
}
</style>

添加位置



 

添加之后的效果



 

效果图如下：

在elementUI中使用多选框checkbox在表格中有两种方法，第一种就像上图中第一列多选框一样，只需在elementUI中table的一列设置一个属性type="selection"即可，如下：

<el-table
   :data="tableData"
   :current-page.sync="currentPage"
   @selection-change="handleSelectionChange"
   style="width: 100%;" class="" ref="taskTable">
   <el-table-column
       type="selection"
       width="55">
   </el-table-column>
</el-table>

但是单独的一列多选框需要和这列多选框进行区分，所以需要单独设置如下：

<el-table-column width="55" label="是否删除" >
   <template slot-scope="scope">
       <el-checkbox v-model="tableData[scope.$index].isDelete"   @change="selectRadio(scope.$index,scope.row)" :disabled="tableData[scope.$index].disabled"></el-checkbox>
   </template>
</el-table-column>

也就是上图红色框的范围区域多选框，因为是和vue一起写的，所以适应v-model进行绑定，数据和多选框勾选方法展示如下：

data(){
    return:{
        tableData:[]
    }
},
method:(){
    //多选框选中方法
    selectRadio(index,row){
                
    },
    //获取数据的方法
    getData () {
       axios.post('/admin/decops/getTasks', {
          currentPage:this.currentPage,
          pagesize:this.pagesize,
          filter:this.formOne
       }).then(res => {
          this.tableData = res.data.tasks;
          this.formDataOne = res.data.selData;
          var Arr = this.tableData;
          this.getAdd(Arr);
          this.count = res.data.count;
       })
    },
    //给表格数据添加一列默认多选框的选中值数据
    getAdd(arr){
        var that = this;
        arr.forEach(function(item,index,array){
           that.$set(arr[index],'isDelete',false)
        });
        return arr
    },
}


使用$set方法向接口返回的表格数据中添加一个属性isDelete，从而实现进行数组数据刷新，使得页面展示刷新。如下



但是这是有了一个问题，就是我点击第一列多选框选中的时候，修改是否删除这一列，第一列多选框框中的数据不会改变，为了防止数据传递错误，我想了一个方法，当选中第一列多选框的时候，使得是否删除这一列的多选框无法选中，实现方法如下：

// 第一列多选框选中事件
handleSelectionChange(val) {
    this.multipleSelection = val;
    if(val.length == 0){
        this.updateDisable(this.tableData);
    }else{
        this.updateDisable(this.tableData,true);
    }
},
//是否禁用多选框
updateDisable(Arr,type){
    var that = this;
    if(type){
        Arr.forEach(function(item,index,array){
            that.$set(Arr[index],'disabled',type)
        });
    }else{
        Arr.forEach(function(item,index,array){
            that.$set(Arr[index],'disabled',false)
        });
    }
    return Arr
}

给表格数据每一列多选框增加一个disabled属性，通过第一列的勾选事件进行控制传递值type，从而进行控制是否删除这一列多选框是否禁用。

效果图如下：

formatter，easyui的一个格式化函数，可以实例化数据表格列。

 

具体事例：




              




具体代码：




datagrid表格中的一列的代码：





[html] view
 plain copy


 print?


<th data-options="field:'id',width:100,formatter:  rowformater">绑定考生</th>  

对应的JS的代码：










[html] view
 plain copy


 print?


@*点击超链接触发的事件+李芬*@  

<script type="text/javascript">  

    //查看详情    

    function rowformater(value, row, index) {  

               

        return "<a href='/AddStudent/AddStudent?ExamPlaceID" + row.ExamPlaceID + "' target='_blank'>绑定考生</a>";   

    }  






  其中函数对应的三个参数，分别是value、row、index。

       value：对应字段当前列的值

       row：当前行的所有的值

       index：一个标识，是从零开始的




   基础性的代码，多多积累。