elementUI之Table表格的常用功能整理和表格封装使用

elementUI之Table表格的常用功能

tooltip-effect使用

1、el-table 标签上 加 tooltip-effect="light" ；// 也可以用tooltip-effect="dark" ；
2、el-table-column标签上 加 show-overflow-tooltip；
3、省略的内容会在 hover 时以 tooltip 的形式显示出来；
4、给el-table 加 border，鼠标拖动表头可以改变表格的宽度；

如下图：

header-row-class-name使用

1、给 el-table 标签上 加 header-row-class-name="table-row-report"，后面字符串自行定义

<style lang="scss">
.table-row-report{
  height: 80px;
  th {
    background-color: #fff !important;
    &:nth-child(2n){
      background-color: #DDD !important;
    }
  }
}
</style>

选择多行数据时使用 Checkbox

1、给 el-table 标签上 @selection-change="handleSelectionChange"；
2、<el-table-column type="selection" width="55"></el-table-column>；
3、添加方法methods中 handleSelectionChange；

methods: {
    handleSelectionChange(row){
      console.log(row);
    }
}

选择多行数据时背景色高亮

1、给 el-table 标签上加如下方法和属性；

@selection-change="handleSelectionChange"
@row-click="selectRow"
:row-style="rowStyle"

2、methods中如下方法；

<script>
export default {
  data() {
    return {
      selectRow: [],
      multipleSelection: []
    }
  },
  watch: {
    multipleSelection(row) {
      //存储选中的row
      this.selectRow = []
      if (row.length > 0) {
        row.forEach((item, index) => {
          this.selectRow.push(item.id)
        })
      }
    }
  },
  methods: {
    // 多选框
    handleSelectionChange(row) {
      console.log(row)
      this.multipleSelection = row;
    },
    // 更改选中行背景色
    rowStyle({ row, rowIndex }) {
      if (this.selectRow.includes(row.id)) {
        return { "background-color": "#ddd" };
      }
    }
  }
}
</script>

表头和内容居中方式

1、表头居中： header-align="center"
2、表格内容居中 align="center"

<el-table-column
  prop="name"
  label="姓名"
  width="180"
  header-align="center"
  align="center"
></el-table-column>

修改列的样式 label-class-name

1、给表头的某一列 label-class-name；

<el-table-column
  prop="name"
  label="姓名"
  width="180"
  header-align="center"
  align="center"
  label-class-name="changeLabelClass"
></el-table-column>

<style lang="scss">
.table-row-report {
  height: 80px;
  color: #000;
  font-weight: 600;
  th {
    background-color: #fff !important;
    &:nth-child(2n) {
      background-color: #ddd !important;
    }
  }
  th.changeLabelClass {
    background: cadetblue !important;
  }
}
</style>

表格的封装使用（样式调整等）

<template>
    <div class="shop-record-table">
       <el-table
            :data="shopRecordTableData"
            height="540"
            :header-cell-style="rowClass"
            :cell-style="cellStyle"
            header-row-class-name="table-row-shop-record"
        >
          <template slot="empty">
            <table-empty />
          </template>
          <template v-for="item in columns">
            <el-table-column
              :key="item.key"
              v-if="item.key !== 'status' && item.key !== 'operation'"
              :prop="item.key"
              :label="item.label"
              :align="item.align || 'left'"
              :width="item.width"
              show-overflow-tooltip
              :label-class-name="item.key === 'lastDate' ? 'last-date'  :''"
            >
            </el-table-column>
            <el-table-column
              v-else-if="['status'].includes(item.key)"
              :key="item.key"
              :prop="item.key"
              :label="item.label"
              :align="item.align"
              :width="item.width"
              :label-class-name="item.key === 'lastDate' ? 'last-date'  :''"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[item.key] == 2">已查</div>
                <div v-if="scope.row[item.key] == 1">草稿</div>
                <div v-if="scope.row[item.key] == 0">待查</div>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.key === 'operation'"
              :key="item.key"
              :prop="item.key"
              :label="item.label"
              :align="item.align"
              :width="item.width"
              :label-class-name="item.key === 'lastDate' ? 'last-date'  :''"
            >
            <template slot-scope="scope">
              <div v-if="scope.row[item.key] == 0" >操作0</div>
              <div v-if="scope.row[item.key] == 1" @click="handleDeleteRecord(scope.row)">操作1</div>
            </template>
          </el-table-column>
          </template>
       </el-table>
    </div>
</templat>

<script>
export default {
data () {
  return {
	shopRecordTableData：[
		{
          storeName:'牛奶店',
          storeId:'0000001',
          bussiness:'事业部',
          region:'北方',
          area:'中部',
          brand:'品牌',
          managerName:'牛先森',
          lastDate:'2021-11-17 11:16:20',
          checker:'牛先森',
          status: 0,
          operation: 0
        },
	],
	columns: [
        { key: 'storeName', label: '门店名称', width: 200, align: 'left' },
        { key: 'storeId', label: '酒店ID', width: 110, align: 'left' },
        { key: 'bussiness', label: '事业部', width: 100, align: 'left' },
        { key: 'region', label: '大区', width: 100, align: 'center' },
        { key: 'area', label: '区域', width: 140, align: 'center' },
        { key: 'brand', label: '品牌', width: 100, align: 'center' },
        { key: 'managerName', label: '店长姓名', width: 120, align: 'center' },
        { key: 'lastDate', label: '最近一次检查日期', width: 160, align: 'center' },
        { key: 'checker', label: '上次检查人', width: 130, align: 'center' },
        { key: 'status', label: '状态', width: 90, align: 'center' },
        { key: 'operation', label: '操作', width: 90, align: 'center' },
	],
  }
}

methods: {
	// 用于修改行样式
    rowClass({row, rowIndex}) {
      // console.log(row, rowIndex) //表头行标号为0
      // return 'background:red'
      return ''
    },
    // 用于修改单元格样式
    cellStyle({row, column, rowIndex, columnIndex}){
      // console.log(row, column, rowIndex, columnIndex) //表头行标号为0
      if(columnIndex === 0){ // rowIndex/columnIndex 指定坐标
        return 'padding:0 10px'
      } else {
        return ''
      }
    }
 }
}
</script>


// 样式
<style lang="scss">
  .shop-record-table{
    width: 100%;
    height: 540px;
    border: 1px solid #EFEFF6;
    border-radius: 6px;
    .el-table__row {
      height: 50px;
      // td {
      //   padding: 0 30px;
      // }
    }
    .has-gutter tr {
      height: 50px;
    }
    .has-gutter tr th {
      font-size: 14px;
      color: #333333;
      font-family: Arial;
    }
    .has-gutter tr{
      :first-child{
        padding-left: 10px;
      }
    }
    thead th {
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      height: 40px;
      background: #F5F6FB;
    }
    // 滚动条的宽度
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条
    }
    // 滚动条的滑块
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #E2E2E2;
      border-radius: 3px;
    }
    th.last-date .cell{
      padding: 0 50px;
    }
  }
</style>

更新中…