Table 表格

基于 El-Table (opens new window) 常用功能总结

基础用法

提示

添加序号

<el-table-column label="#" type="index" align="center" width="50">
    <template slot-scope="scope">
        <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
    </template>
</el-table-column>

去除hover颜色

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent;
}

点击行勾选

<el-table
    @row-click="rowClick"
    row-key="templateId" 
    ref="table"
</el-table>

rowClick(row, event, column) {
    this.$refs.table.toggleRowSelection(row)
}

横向滚动条加粗

::v-deep .el-table__body-wrapper, .el-scrollbar__wrap {
  &::-webkit-scrollbar  {
    height: 8px !important;
  }
}

注意： 示例布局有误，复制到若依项目中正常。

<template>
  <el-table
      :data="tableData"
      border
      :max-height="tableHeight"
      @selection-change="handleSelectionChange"
      style="width: 100%">
    <el-table-column type="selection" width="55" align="center" :selectable="handleSelectable"/>

    <el-table-column label="#" type="index" align="center" width="50">
      <template slot-scope="scope">
        <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
      </template>
    </el-table-column>

    <el-table-column label="#" width="50" align="center">
      <template slot-scope="scope">
        <el-radio v-model="singleRadio" :label="scope.row.name">{{ '' }}</el-radio>
      </template>
    </el-table-column>

    <el-table-column
        prop="name"
        label="姓名"
        align="center"
        width="180">
      <template slot-scope="scope">
        <div class="text-ellipsis-cus">
            <span @click="handleTagDescription(scope.row)"
                  class="title-underline-primary-cus"
            >{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="姓名">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
        prop="address"
        align="center"
        :show-overflow-tooltip="true"
        label="地址">
    </el-table-column>
    <el-table-column label="操作" align="center" width="150" fixed="right"
                     class-name="small-padding fixed-width"
    >
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['xxx:xxx:edit']"
        >修改
        </el-button>
        <el-button
            size="mini"
            type="text"
            class="text-danger-cus"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['xxx:xxx:remove']"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        singleRadio: null,
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        tableHeight: 300,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        ids: undefined,
      }
    }
    ,
    methods: {
      // 多选 
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
      },
      // 名字详情
      handleTagDescription(row) {
        this.$message.success("您点击了" + row.name)
      },
      // 修改
      handleUpdate(row) {
        this.$message.success("您点击了" + row.name + "修改")
      },
      // 删除
      handleDelete(row) {
        this.$message.success("您点击了" + row.name + "删除")
      },
      // 禁用
      handleSelectable(row, index) {
        // 禁用 disabled
        if (index === 0) {
          return false;
        }
        return true
      }
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 50px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin: 5px 20px;
    width: 100%;
  }

  /**
  针对例子布局样式，无需复制到项目
   */
  table {
    margin: 0;
  }
</style>

Expand Copy Copy