Vue Element Table 表格

Element Table 表格  

列头居中，自定义样式，鼠标悬浮，v-if判断，:formatter=""
本示例以 Vue Element Admin 项目为基础，介绍 Element Table 表格控件


1、/src/views/table.vue

<template>
  <div class="app-container">
    <el-table
      ref="multipleTable"
      :data="tableData"
      :default-sort="{prop: 'date', order: 'descending'}"
      highlight-current-row
      stripe
      border
      style="width: 100%"
      :header-row-style="{height:'100px','font-size':'50px',color:'#32a589'}" 
      :header-cell-style="thStyleFun"
      :cell-style="cellStyleFun"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" :index="indexMethod" label="序号" align="center" width="50"></el-table-column>
      <el-table-column width="55">
        <template slot-scope="scope">
          <el-radio v-model="tableRadio" :label="scope.row">
            <i></i>
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" sortable width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
      <el-table-column align="center" label="性别" width="220">
        <template scope="scope">                    
            <p v-if="scope.row.sex === 1">男</p>
            <p v-if="scope.row.sex === 0">女</p>
          </template>
      </el-table-column>
      <el-table-column prop="state" label="性别" :formatter="sexFormat"></el-table-column>
      <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">复选框取消选择</el-button>
      <el-button @click="setCurrent()">单选取消选择</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          sex: 1,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          sex: 1,
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          sex: 1,
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          sex: 1,
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      tableRadio: "",
      currentRow: null,
      multipleSelection: []
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, JSON.stringify(row));
    },
    handleDelete(index, row) {
      console.log(index, JSON.stringify(row));
    },
    thStyleFun() {
      return 'text-align:center'
    },
    cellStyleFun() {
      return 'text-align:center'
    },
    formatter(row, column) {
      return `${row.address} 拼接字符串`;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    setCurrent(row) {
      this.$refs.multipleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;

      //单选按钮选中的值
      this.tableRadio = val;
      console.log(`radio：${JSON.stringify(this.tableRadio)}`);
    },
    handleSelectionChange(val) {
      //   begin
      //   用复选框实现单选【每次只能有一个被选中】
      //   if (val.length > 1) {
      //     this.$refs.multipleTable.clearSelection();
      //     this.$refs.multipleTable.toggleRowSelection(val.pop());
      //   }
      //   end

      //复选框选中的值
      this.multipleSelection = val;
      console.log(`check：${JSON.stringify(this.multipleSelection)}`);
    },
    sexFormat(row, column) {
      if (row.size_type === 1) {
        return '男'
      } else  {
        return '女'
      } 
    },
    indexMethod(index) {
      return index + 1;
    }
  }
};
</script>
<style lang="scss">
.el-table {
    thead {
      font-family: "Microsoft YaHei";
      font-size: 20px;
      color: #b6b6b6;
      font-weight: 1;
    }
    font-family: "Microsoft YaHei";
    font-size: 20px;
    color: #333333;
    font-weight: normal;
    border: 0;
    th,
    tr,
    td {
      border: 0;
      background-color: #fff;
    }
    &::before {
      height: 0px;
    }
    &::after {
      width: 0;
    }
    .el-table__fixed:before {
      height: 0;
    }
    th.is-leaf, .el-table td {
      border-bottom: 0px solid #dfe6ec;
      font-weight: normal;
    }
  }
  // 鼠标悬浮
  .el-table--enable-row-hover .el-table__body tr:hover{
    color: #60a896;
    background: #f3f7f6;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color:#32a589;
  }
  // 取消鼠标悬浮事件
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: transparent !important;
  }
</style>

2、/src/api/table.js

3、服务端 API 接口返回 json 数据
*
*
*