基于element table的二次封装

<!--region 封装table-->

<template>

  <div class="table">

    <el-table

      id="iTable"

      :data="data"

      ref="mutipleTable"

      @selection-change="handleSelectionChange"

      v-loading="isLoad"

      element-loading-text="数据正在加载中..."

      :show-summary="isShowSummary"

      :empty-text="emptyText"

      :border="border"

    >

      <!--region 数据列-->

      <template v-for="column in columns">

        <template v-if="column.type">

          <el-table-column

            :type="column.type"

            :key="column.label"

            :label="column.label"

            :align="column.align"

            :width="column.width"

          ></el-table-column>

        </template>

        <template v-else>

          <el-table-column

            :prop="column.prop"

            :key="column.label"

            :label="column.label"

            :align="column.align"

            :width="column.width"

          >

            <template slot-scope="scope">

              <slot

                :scope="scope.row"

                v-if="column.slot"

                :name="column.slot"

                :row="scope.row[column.slot]"

              />

              <span v-else>{{ scope.row[column.prop] }}</span>

            </template>

          </el-table-column>

        </template>

      </template>

      <!--endregion-->

    </el-table>

  </div>

</template>

<!--endregion-->

<script>

export default {

  props: {

    // 数据列表

    data: {

      type: Array,

      default: [],

    },

    // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽, // table 表格的控制参数

    columns: {

      type: Array,

      default: [],

    },

    //是否加载

    isLoading: {

      type: Boolean,

      default: false,

    },

    //是否在表尾显示合计行

    isShowSummary: {

      type: Boolean,

      default: false,

      require: false,

    },

    //emptyText

    emptyText: {

      type: String,

      default: "暂无数据",

      require: false,

    },

    //是否带边框

    border: {

      type: Boolean,

      default: false,

      require: false,

    },

    //选择方式（仅用于多选时）

    type: {

      type: String,

      default: "select",   //select：多选    radio：单选

      require: false,

    },

  },

  // 数据

  data() {

    return {

      pageIndex: 1,

      multipleSelection: [], // 多行选中

      isLoad: this.isLoading,

    };

  },

  watch: {

    isLoading: function (val, old) {

      this.isLoad = val;

    },

  },

  methods: {

    // 多行选中

    handleSelectionChange(val) {

      this.multipleSelection = val;

      this.$emit("result", val);

    },

  },

};

</script>

使用场景：

<script>
import Table from "@/components/Table";
export default {
    components: {
    Table,
  },
    data() {
    return {
      projectList: [], //项目列表
      projectListCloumn: [
        {
          type: "index",
          label: "序号",
        },
        {
          prop: "name",
          label: "工程项目或者费用名称",
        },
        {
          prop: "projectType",
          label: "项目类型",
          slot: "projectType",
        },
        {
          prop: "amount",
          label: "概算总价(万元)",
        },
        {
          prop: "purchaseType",
          label: "采购形式",
          slot: "purchaseType",
        }
      ],
    };
  },
}
</script>

　　　　<Table :data="projectList" :columns="projectListCloumn">

          <template slot="projectType" slot-scope="scope">

            <el-select v-model="scope.scope.projectType" placeholder="请选择">

              <el-option

                v-for="item in projectTypes"

                :key="item.value"

                :label="item.text"

                :value="item.value"

              >

              </el-option>

            </el-select>

          </template>

          <template slot="purchaseType" slot-scope="scope">

            <el-select v-model="scope.scope.purchaseType" placeholder="请选择">

              <el-option

                v-for="item in purchaseTypes"

                :key="item.value"

                :label="item.text"

                :value="item.value"

              >

              </el-option>

            </el-select>

          </template>

          <template slot="option" slot-scope="scope">

            <i class="el-icon-document font-purple"

              ><span @click="save(scope.scope.id)">查看</span></i

            >

            <i class="el-icon-document font-purple"><span>启动</span></i>

            <i class="el-icon-document font-purple"><span>编辑</span></i>

            <i class="el-icon-delete font-red"><span>删除</span></i>

          </template>

        </Table>

如果不需要自定义列内容，只是想单纯展示的话，在定义列的时候就不需要定义slot，直接定义prop及lable就好

然后在页面中直接使用封装的组件就好，代码如下

<Table :data="projectList" :columns="projectListCloumn"></Table>

 

注：1、template 中的slot值一定要跟列定义中的slot值一样，不然无法对应匹配

　　2、slot-scope中的scope值实际包含row及scope，但是真正的列表行数据在scope中，所以如果想取当前行数据的话，一定要通过scope.scope来取值，不然就修改table封装中的scope值