Vue ElementUI 实现 Table 多列数据 checkBox选择框

日期选择器

日期范围选择器

设置默认时间值

注意事项

• value-format=“yyyy-MM-dd hh:mm:ss” 格式化日期选择器 value值格式
• :default-time="[‘00:00:00’, ‘23:59:59’]"

实例：

##Tabs标签页
###设置标签页点击事件
注意事项：

• @tab-click=“tabsClick”
• v-model=“activeTabName” 设置默认选中的标签页名称。activeTabName为自定义变量。

实例：

 
    
     

data() {
     return {
            activeTabName: "dataTab1",
       }
}

Table表格

多列增加多选框并在表头提供全选

方式一:使用render-header 函数初始化表头（该方式不够灵活，有点low，且实现全选，较为麻烦）

效果图

先贴代码为敬：

   
   
        
    
    ... 
    

 data(){
            return{
                   tableDatas:[] ,
                   Column1CheckedAll :null,// 根据业务需要，我这边要默认先自定义判断，所以先置为null
            } 
 }

//column 为当前列 
 renderSO2Header(h,{column}){
                return h(
                    'div',
                    [
                        //加入选择框，同时绑定事件
                        h('el-checkbox',{
                            on:{
                                // event为当前checkbox选中状态值（true/false）
                                change: ($event, column) => this.selectColumn1($event, column),
                            }
                        }),
                        // 加入label，值为 el-table-column 标签定义的 label="Column1"  及 Column1
                        h('span', column.label),
                    ],
                )
 },
 selectColumn1(val,column){
              //改变 Column1CheckAll 变量值 同时对表格进行 初始化 重新赋值
               this.Column1CheckAll = val;
               this.initTableData();          
},

思路：

• 使用:render-header 为每一列初始化表头。加入checkbox。
• 使用 templete + slot-scope 自定义列内容，加入选择框。
• 定义变量 Column1CheckedAll 控制内容区域选中状态（选中状态改变重新初始化table），如果不为null 选中状态使用Column1CheckedAll ，为空时自定义条件选中。

方式2：简单易懂，效果还好（建议使用）。

效果图(很明显表头输入框拥有未确认状态，并实现全选、取消全选功能。)

继续上代码：页面内容区

事件方法区

  //先看data 定义
       data(){
            return{
                auditData:[],//表格行内容数据
                
                auditDataColumnCode:[]//表头动态列内容数据Code备份  业务需求 可忽略

                auditDataColumn:[],//表头动态列内容数据集合

                checkAllOptions:[], //全选备用赋值数组   二维  注意没写错 这里暂时先定义成一维数组 业务需求 需要动态验证是否选中
                noCheckAllOptions:[], //全选备用赋值数组 二维
                checkedOptions:[],//列选择项 选中控制 二维
                checkOptionCount:[], //实时记录当前列 选中数量  
                checkAll:[],//表头全选按钮 选中控制
                isIndeterminate:[] //表头 不确定状态控制
            }
        },
        methods:{
              //动态初始化 赋值方法  datas 为从后台获取的行数据 auditData
              initAuditDataCheckState(datas){
                //循环 auditDataColumn  以及 auditData 行数据 初始化 选择框 ,同时赋值 
                for(var i = 0;i

scope.row[item.tableHeaderCode]（前端中括号取值详解）

场景描述
假如现在有动态表头数组对象，有行数据数组对象内如如下

tableColumnHeaderDatas:[
    {
          "headerName":"名称列"，
          "headerCode":"name"，
    }，
   {
          "headerName":"年龄列"，
          "headerCode":"age"，
    }，
    {
          "headerName":"地址列"，
          "headerCode":"address"，
    }，
]
tableRowDatas:[
      {
            "name":"李四",
            "age":"19",
            "address":"北京市"
      },
      {
            "name":"张三",
            "age":"22",
            "address":"天津市"
      },
      {
            "name":"王五",
            "age":"23",
            "address":"成都市"
      },
]
//中括号[]取值 示范：假如想要拿到李四的名字 
//普通取值，通过数据行Row取值方式
tableRowDatas[0].name
//中括号通过表头取值方式
tableRowDatas[0][tableColumnHeaderDatas[0].headerCode]
//分解
tableColumnHeaderDatas[0].headerCode  //由于 tableColumnHeaderDatas[0].headerCode 值为name 其实这么写就等价于 "name"
tableRowDatas[0].name 用中括号方式来写为： tableRowDatas[0]["name"]  这两个方式都可以取到name属性的值。  如下图

综上所述：
在使用scope.row[item.tableHeaderCode]时，只需要保证item.tableHeaderCode的值与实际行数据row对象某个字段名匹配就可以获得该row对象对应字段的值。