vue：遇到的坑之-----table属性（element-ui）

主要记录一下项目中常用到的table属性

1、stripe:是否显示斑马纹

 
// 后来发现可以直接这么写，哎之前好傻
 

 

 2、可以自己更改行颜色，样式如下

.el-table tr:hover{
    background: #f6faff; //鼠标移动到当前行的颜色
}

.el-table tr {
	background-color: #eaf2ff; // 单数行的颜色
}

 

3、表头和表内容居中格式

// 表头居中，内容居右


// 表头内容都居中

4、表头样式

5、格式化表格内容

//第一种方式：通过formatter属性


formatterData(row, column) {
      var checkType = "";
      switch (row.isCheck) {
        case "0":
          checkType = "未审核";
          break;
        case "1":
          checkType = "已审核";
          break;
        default:
          checkType = "无";
      }
      return checkType;
    },


//第二种方式：通过filter过滤器

    


//写在src下的filter文件内，全局使用，或者在当前vue文件中局部使用
Vue.filter('dataFilter', (input) => {
    var checkType = "";
      switch (row.isCheck) {
        case "0":
          checkType = "未审核";
          break;
        case "1":
          checkType = "已审核";
          break;
        default:
          checkType = "无";
      }
      return checkType;
})

//第三种方式：通过v-if来判断（针对于比较简单的数据）

    
 

6、行样式

    rowStyle(row, rowIndex) {
      if (row.row.name!= '小明') {
          console.log('不等于1')
        return "background-color:red";
      }
    },

--------------

新增内容11.10：

7、表头增加图标及图标的一些属性（不止可以增加图标）

methods:{
    renderH(h,{column}) {
      var $this = this;
      return h('i',{
        class:'el-icon-edit', // 增加图标
        style:'color:red', // 增加图标的颜色属性
        on:{ // 增加点击事件
            click:function() {
              $this.$message.success('yeah!')
            }
        },
        attr:{
            id:'nameId', // 增加id属性
            title:'修改', // 增加title属性
        }
      })
    }
}

 

8、el-table表格所有border颜色更改 

.el-table--border, .el-table--group {
    border-color:  red !important;
}
.el-table--border:after, .el-table--group:after, .el-table:before {
    background-color: red !important;
}
.el-table td, .el-table--border th,.el-table th.is-leaf {
    border-bottom-color: red !important;
}
.el-table--border td, .el-table--border th {
    border-right-color: red !important;
}

------------

新增内容11.14：

9、行内容太多，默认超出隐藏，点击行显示全部内容，再次点击恢复超出隐藏

show属性是我在获取表格数据自己添加的上去的，初始值为false，index也是我自己加上去的。。因为在触发行点击的参数里找不到index值。。只能自己加

methods:{
    queryTable() {
        this.$axios(url,params).then(res=>{
            this.tableData = res.data.data;
            this.tableData.forEach((item,i)=>{
              item.show = false;
              item.index = i;
            })
        })
    },

    contentCellClick(row,column,cell,event) {
      //指定为内容列点击才生效
      if (column.property == "content") {
        this.$set(row,'show',!row.show); //切换状态
        if(row.show) {
          this.$refs['isshow'+row.index].classList.add('show');
        } else {
          this.$refs['isshow'+row.index].classList.remove('show');
        }
      }
    },
}

 

.content {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.show {
  white-space: normal;
}

有待补充~