el-table简单二次封装

直接上代码   

1、table封装部分代码

<template>
 <div>    
  <el-table
    ref="secondTable"
    :row-key="getRowKey"
    :data="tableData"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-table-column
      v-if="showSelect"
      width="50"
      type="selection"
      reserve-selection
    ></el-table-column>
    <el-table-column
      v-if="showIndex"
      fixed
      label="序号"
      width="50"
      type="index"
      :align="align"
    ></el-table-column>
    <el-table-column
      v-for="(col, index) in tableColumns"
      :key="col.prop"
      :prop="col.label"
      :width="col.width"
      :align="col.align || align"
      :fixed="col.fixed"
      :sortable="col.sortable"
      :show-overflow-tooltip="col.showOverflowTooltip"
    >
      <template #header="scope">
        <slot :name="col.header" :scope="{ header: col.label, ...scope }">
          <span>{{ col.label }}</span>
        </slot>
      </template>
       // 这种方式如果想拿index,在调用的时候是scope.$index,获取row时,写成scope.row
      <template #default="scope">
        <slot :name="col.prop" :scope="scope">
          <span>{{ scope.row[col.prop] }}</span>
        </slot>
      </template>
      // 或者用以下方法(解构),这种方便一些(在使用该组件的时候,可以直接拿到row和index)
      <!--<template slot-scope="{ row,$index }">-->
      <!--<template #default="{row,$index}">-->
      <!--        <slot :name="col.prop" :scope="row" :index="$index">-->
      <!--          <span>{{ row[col.prop] }}</span>-->
      <!--        </slot>-->
      <!--      </template>
    </el-table-column>
  </el-table>
  // 分页组件插槽
  <slot name="pagination"></slot>
 </div> 
</template>
<script>
export default {
  name: "secondTable",
  inheritAttrs: false,
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => [],
      require: true,
    },
    // 表格列和列属性：
    // label显示的标题
    // align对齐方式
    // show-overflow-tooltip当内容过长被隐藏时显示tooltip
    tableColumns: {
      type: Array,
      default: () => [],
      require: true,
    },
    // 是否显示多选框
    showSelect: {
      type: Boolean,
      default: false,
    },
    // 是否显示索引
    showIndex: {
      type: Boolean,
      default: false,
    },
    // 对齐方式
    align: {
      type: String,
      default: "center",
    },
    // 行数据的 Key，用来优化 Table 的渲染
    rowKey: {
      type: String,
      default: "id",
    },
  },
  methods: {
    getRowKey(row) {
      return row[this.rowKey];
    },
  },
};
</script>

<style></style>

2、封装之后调用部分代码

<template>
  <div class="page">
    <SecondTable
      :table-data="tableData"
      :table-columns="tableColumns"
      show-select
      show-index
      @selection-change="selectionChange"
      // 双击表格等事件都可以写在这里,如@row-dblclick="handleEdit"
    >
      <template #genderHeader="{ scope }">
        <div>
          {{ scope.header }}
          <div>
            <el-select v-model="region" size="mini" placeholder="请选择性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
              <el-option label="未知" value="3"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template #gender="{ scope }">
        <div>
          //在这里  想获取行的index,写法为scope.$index
          {{
            scope.row.gender === 1
              ? "男"
              : scope.row.gender === 2
              ? "女"
              : "未知"
          }}
        </div>
      </template>
      //如果表格使用的是第二或第三种格式封装的,可以写成以下形式
      // 这里的scope,index,是你表格插槽那里写的什么属性名字,这里就是什么,scope就是row的值,index就是$index的值
      <!--                <template #gender="{ scope,index }">-->
      <!--                  <div>-->
      <!--                    {{-->
      <!--                      scope.gender === 1-->
      <!--                        ? '男'-->
      <!--                        : scope.gender === 2-->
      <!--                          ? '女'-->
      <!--                          : '未知'-->
      <!--                    }}-->
      <!--                  </div>-->
      <!--                </template>-->
      // 这里获取的内容同上,如果你在表格中用第一种方法,想获取row、$index就要写成scope.row、scope.$index。如果你在表格中封装的是第二种或第三种,获取row,$index就是{scope,index}
      <template #operation="{ scope,index }">
        <div>
          <el-button @click.stop="handleEdit(scope,index)">编辑</el-button>
          <el-button>删除</el-button>
        </div>
      </template>
      <template #pagination>
          <div>
             <pagination
               v-if="turbinesInfoData.length > 0"
               :total="turbinesInfoData.length"
               :pageSizes="listQuery.pageSize"
               :limit="listQuery.pageSize"
               layout="prev, pager, next"
               :page.sync="listQuery.currentPage"
               @pagination="handleFilter"
             />
          </div>
      </template>
    </SecondTable>
  </div>
</template>

<script>
import SecondTablefrom "./components/secondTable.vue";

export default {
  name: "App",
  components: {
    SecondTable,
  },
  data() {
    return {
      region: "",
      tableData: [
        {
          name: "张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三",
          age: 18,
          gender: "1",
        },
        {
          name: "李四",
          age: 19,
          gender: "2",
        },
        {
          name: "王五",
          age: 20,
          gender: "3",
        },
      ],
      tableColumns: [
        {
          label: "名称",
          prop: "name",
          propHeader: "nameHeader",
          showOverflowTooltip: true,
        },
        {
          label: "年龄",
          prop: "age",
          header: "ageHeader",
          sortable: true,
          minWidth: 100,
        },
        { label: "性别", prop: "gender", header: "genderHeader", minWidth: 1000 },
        {
          label: "操作",
          prop: "operation",
          header: "operationHeader",
          fixed: "right",
          minWidth: 200,
        },
      ],
    };
  },
  methods: {
    selectionChange(selection) {
      console.log('selection', selection)
    },
    handleEdit(row,index){
      console.log('row', row,index)
    }
  },
};
</script>

<style scoped>
.page >>> .el-select .el-input__inner {
  text-align: center;
}
</style>