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

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

1、stripe:是否显示斑马纹

<el-table :stripe="true"> </el-table>
// 后来发现可以直接这么写，哎之前好傻
<el-table stripe> </el-table>

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

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

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

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

// 表头居中，内容居右
<el-table-column header-align="center" align="right"></el-table-column>

// 表头内容都居中
<el-table-column align="center"></el-table-column>

4、表头样式

<el-table :header-cell-style="{fontWeight:'bold',fontSize:'13px',color:'#58595d'}"></el-table>

5、格式化表格内容

//第一种方式：通过formatter属性
<el-table-column :formatter="formatterData"></el-table-column>

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


//第二种方式：通过filter过滤器
<el-table-column>
    <template slot-scope="scope">
        {{ scope.row.data | dataFilter}}
    </template>
</el-table-column>

//写在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来判断（针对于比较简单的数据）
<el-table-column>
    <template slot-scope="scope">
       <span v-if="scope.row.isCheck==='0'" style="color: red">未审核</span>
       <span v-else-if="scope.row.isCheck==='1'">已审核</span>
       <span v-else-if="!scope.row.isCheck" style="color: red">未审核</span>
    </template>
 </el-table-column>

6、行样式

<el-table :row-style="rowStyle"></el-table>

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

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

新增内容11.10：

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

<el-table-column prop="name" label="名称" align="center" :render-header="renderH">
</el-table-column>

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、行内容太多，默认超出隐藏，点击行显示全部内容，再次点击恢复超出隐藏

<el-table @cell-click="contentCellClick" >
    <el-table-column prop="content" min-width="200" label="内容" align="center">
        <template slot-scope="scope">
            <span class="content" :ref="'isshow'+scope.row.index">            
                {{scope.row.content}}
            </span>
        </template>
    </el-table-column>
</el-table>

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

 

10.  表格高度自适应屏幕高度

<el-table ref="bondTable" :height="table_height" ></el-table>

data() {
    return {
        table_height: null
    }
},
mounted() {
    this.$nextTick(() => {
      this.table_height =
        window.innerHeight - this.$refs.bondTable.$el.offsetTop - 35; // -35这个根据自己情况修改

      // 监听窗口大小变化
      let self = this;
      window.onresize = function() {
        self.table_height =
          window.innerHeight - self.$refs.bondTable.$el.offsetTop - 35;
      };
    });
}

 

有待补充~