# table-config

**Repository Path**: moderationzw/table-config

## Basic Information

- **Project Name**: table-config
- **Description**: 基于vue2+element-ui 封装table组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-20
- **Last Updated**: 2024-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# table表格封装

# 基于vue2 element ui 

## 一、最终实现效果

![](image/image_Y7m-ktmOKi.png)

## 二、文件介绍

![](image/image_NV9u_7qVQT.png)

## 三、封装步骤

### 一、按照以上创建文件

### 二、index.scss

-   需要在main.js 引入
    ```javascript
    $bgc-col: #f4f4f4; //背景色

    .layout-content {
      width: 100%;
      height: 100%;
      padding: 6px;
      background-color: $bgc-col;
      .content-header {
        padding: 6px 2px;
        margin: auto 0;
        width: 100%;
        background: #fff;
        .el-form-item {
          padding: 6px 0px;
          margin-bottom: 0;
        }
      }
      .content-toolbar {
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        .content-toolbar-left {
        }
        .content-toolbar-right {
        }
      }
    }

    ```

### 三、封装table

-   table 组件
    ```javascript
    <template>
      <div ref="table-box" class="table-content-box">
        <div>
          <el-table :data="data" :stripe="stripe" :size="size" :empty-text="emptyText" :height="height"
            :max-height="maxHeight" v-bind="tableConfig" @selection-change="selectionLineChangeHandle"
            ref="zwTable">
            <el-table-column align="center" fixed="left" v-if="selectIsShow" type="selection"
              :index="(index) => index + 1" />
            <el-table-column type="index" label="序号" align="center" fixed="left" v-if="idxIsShow" />
            <template v-for="item in columns">
              <!-- 渲染 使用插槽 -->
              <template v-if="item.useSlot">
                <el-table-column :key="item.prop" v-bind="item" :align="item.align || 'center'"
                  show-overflow-tooltip>
                  <!-- 匿名插槽 -->
                  <!-- <template>
                    <slot>我是本来的内容</slot>
                  </template> -->

                  <!-- 具名插槽 -->
                  <!-- <template>
                    <slot :name="item.soltName"></slot>
                  </template> -->

                  <!-- 作用域 插槽 -->
                  <template slot-scope="{row, column, index}">
                    <!-- {{row[item.prop]}} -->
                    <slot name="columns" :row="{ ...row, ...item }" :column="column" :index="index"
                      :value="row[item.prop]" :prop="item.prop">
                    </slot>
                  </template>
                </el-table-column>
              </template>
              <!-- 渲染 多级表头 -->
              <template v-else-if="item.children && item.children.length > 0">
                <TableColumn :key="item.prop" :itemObj="item" :columns="item.children">
                  <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
                    <!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
                    <slot :name="slot" v-bind="scope" />
                  </template>
                </TableColumn>
              </template>
              <!-- 渲染 操作 -->
              <template v-else-if="item.actions && item.actions.length > 0">
                <el-table-column :key="item.prop" :align="item.align || 'center'"
                  :fixed="item.fixed || 'right'" show-overflow-tooltip v-bind="item">
                  <template slot-scope="{row}">
                    <template v-for="newItem in item.actions">
                      <template v-if="newItem.mold === 'delete'">
                        <el-popconfirm title="这一段内容确定删除吗" :key="newItem.id"
                          @confirm="newItem.click(row)" @cancel="() => { }">
                          <el-button style="margin-left:8px" :size="newItem.size || 'mini'"
                            slot="reference" v-bind="newItem">{{ newItem.text }}</el-button>
                        </el-popconfirm>
                      </template>
                      <template v-else>
                        <el-button @click="newItem.click(row)" :type="newItem.type || primary"
                          :size="newItem.size || 'mini'" :key="newItem.id"
                          v-bind="newItem">{{ newItem.text }}</el-button>
                      </template>
                    </template>
                  </template>
                </el-table-column>
              </template>
              <!-- 渲染 其他 -->
              <template v-else>
                <el-table-column :key="item.prop" :align="item.align || 'center'" show-overflow-tooltip
                  v-bind="item"></el-table-column>
              </template>
            </template>
          </el-table>
        </div>
        <!--分页区域-->
        <div class="table-content-foot" v-if="paging">
          <div></div>
          <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageNum" :page-sizes="pageSizes" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </template>
    <script>
    import TableColumn from './components/table-column/table-column.vue'
    export default {
      name: 'TableConfig',
      props: {
        columns: {
          type: Array,
          default: () => []
        },
        data: { // 表格数据
          type: Array,
          default: () => []
        },
        pageNum: {
          type: Number,
          default: 1
        },
        pageSize: {
          type: Number,
          default: 10
        },
        total: {
          type: Number,
          default: 0
        },
        pageSizes: {
          type: Array,
          default: () => [10, 20, 30, 40]
        },
        selectIsShow: {  // 选择框是否显示
          type: Boolean,
          default: false
        },
        idxIsShow: {  // 序列号是否显示
          type: Boolean,
          default: true
        },
        height: {
          type: [Number, String],
          default: 'calc(90vh - 154px)'
        },
        maxHeight: {
          type: [Number, String],
          default: '100%',
        },
        emptyText: { // 无数据时显示文字
          type: String,
          default: '暂无数据'
        },
        stripe: {  // 是否为斑马纹 table
          type: Boolean,
          default: false
        },
        size: {  // Table 的尺寸
          type: String,
          default: 'small'
        },
        tableConfig: { // 更多table 组件的配置
          type: Object,
          default: () => {
            return {
              headerCellStyle: {
                background: '#e6f5f3', color: '#606266'
              }
            }
          }
        },
        paging: { // 分页
          type: Boolean,
          default: true
        },
      },
      components: {
        TableColumn,
      },
      data() {
        return {
          // 复选框选中的行
          selectRows: [],
          // 点击行选中的当前行
          currentRow: undefined,
          // 内部高度，动态计算
          innerHeight: 0,
          // 行编辑开启的行索引集合
          editRowsKey: [],
          // 行编辑的编辑数据，key值为行索引
          editRowsData: {},
          // 分页条的高度 TODO: 暂时写死，
          paginationHeight: 52,
          // 按钮区域的高度 TODO: 暂时写死
          buttonHeight: 42,
        }
      },
      mounted() {

      },
      methods: {
        selectionLineChangeHandle(val) {
          this.$emit('selectionLineChangeHandle', val)
        },

        //  设置某个选中
        toggleRowSelection(val) {
          this.$refs.zwTable.toggleRowSelection()
        },


        // 设置全选
        toggleAllSelection() {
          this.$refs.zwTable.toggleAllSelection()
        },


        handleSizeChange(val) {
          this.$emit('onChangeSize', val)
        },
        handleCurrentChange(val) {
          this.$emit('onChangeNum', val)
        }
      },
      updated() {
        // 解决表格抖动
        this.$refs.zwTable.doLayout()
      },

    }
    </script>

    <style lang="scss"  scoped>
    .table-content-box {
      .table-content-foot {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
    </style>



    ```
-   table-column 递归组件
    ```javascript
    <template>
      <el-table-column v-bind="itemObj" :align="itemObj.align || 'center'" show-overflow-tooltip>
        <!-- 作用域 插槽 -->
        <template v-for="item in columns">
          <!-- 渲染 使用插槽 -->
          <template v-if="item.useSlot">
            <el-table-column :key="item.prop" v-bind="item" :align="item.align || 'center'"
              show-overflow-tooltip>
              <!-- 匿名插槽 -->
              <!-- <template>
                <slot>我是本来的内容</slot>
              </template> -->

              <!-- 具名插槽 -->
              <!-- <template>
                <slot :name="item.soltName"></slot>
              </template> -->

              <!-- 作用域 插槽 -->
              <template slot-scope="{row, column, index}">
                <slot name="columns" :row="{...row,...item}" :column="column" :index="index"
                  :value="row[item.prop]" :prop="item.prop">
                </slot>
              </template>
            </el-table-column>
          </template>
          <!-- 渲染 多级表头 递归组件-->
          <template v-else-if="item.children && item.children.length>0">
            <TableColumn :key="item.prop" :itemObj="item" :columns="item.children">
              <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
                <!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
                <slot :name="slot" v-bind="scope" />
              </template>
            </TableColumn>
          </template>
          <!-- 渲染 操作 -->
          <template v-else-if="item.actions && item.actions.length>0">
            <el-table-column :key="item.prop" :align="item.align || 'center'"
              :fixed="item.fixed || 'right'" show-overflow-tooltip v-bind="item">
              <template slot-scope="{row}">
                <template v-for="newItem in item.actions">
                  <template v-if="newItem.mold==='delete'">
                    <el-popconfirm title="这一段内容确定删除吗" :key="newItem.id" @confirm="newItem.click(row)"
                      @cancel="()=>{}">
                      <el-button style="margin-left:8px" :size="newItem.size || 'mini'" slot="reference"
                        v-bind="newItem">{{newItem.text}}</el-button>
                    </el-popconfirm>
                  </template>
                  <template v-else>
                    <el-button @click="newItem.click(row)" type="primary" :size="newItem.size || 'mini'"
                      :key="newItem.id" v-bind="newItem">{{newItem.text}}</el-button>
                  </template>
                </template>

              </template>
            </el-table-column>
          </template>
          <!-- 渲染 其他 -->
          <template v-else>
            <el-table-column :key="item.prop" :align="item.align || 'center'" show-overflow-tooltip
              v-bind="item"></el-table-column>
          </template>
        </template>
      </el-table-column>
    </template>

    <script>
    export default {
      name: "TableColumn",
      props: {
        columns: {
          type: Array,
          default: () => []
        },
        itemObj: {
          type: Object,
          default: () => { }
        }
      },
    }
    </script>

    <style lang="scss" scoped>
    </style>

    ```
-   控制显隐、以及实现表格的拖拽排序  npm i sortablejs --save-dev    sortablejs 插件
    ```javascript
    <template>
      <div class="top-right-btn" :style="style">
        <el-row>
          <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
            v-if="search">
            <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columnsList">
            <el-button size="mini" circle icon="el-icon-menu" @click="open= !open" />
          </el-tooltip>
        </el-row>
        <div class="table-list-show" v-show="open">
          <template>
            <el-checkbox-group v-model="value" @change="dataChange" ref="el-checkbox">
              <el-checkbox v-for="(item,idx) in columnsList" :label="item.prop"
                :key="idx">{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </template>
        </div>
      </div>
    </template>
    <script>
    import Sortable from 'sortablejs'
    export default {
      name: "RightToolbar",
      data() {
        return {
          // 显隐数据
          value: [],
          // 弹出层标题
          title: "显示/隐藏",
          // 是否显示弹出层
          open: false,
          draggingKey: '',  // 当前拖拽项
        };
      },
      props: {
        showSearch: { // 是否显示搜索框
          type: Boolean,
          default: true,
        },
        columnsList: {  // table的总列，
          type: Array,
          default: () => []
        },
        search: {
          type: Boolean,
          default: true,
        },
        gutter: {
          type: Number,
          default: 10,
        },
      },
      computed: {
        style() {
          const ret = {};
          if (this.gutter) {
            ret.marginRight = `${this.gutter / 2}px`;
          }
          return ret;
        }
      },
      created() {
        // 显隐列初始默认隐藏列
        this.columnsList.forEach((item) => {
          this.value.push(item.prop);
        })
        this.dataChange()
      },
      mounted() {
        this.Sortable()
      },
      methods: {
        // 显隐搜索
        toggleSearch() {
          this.$emit("update:showSearch", !this.showSearch);
        },

        // 刷新
        refresh() {
          this.$emit("queryTable");
        },

        // 穿梭
        dataChange() {
          // 对外暴露出需要显示的列
          this.$emit('updateColumnsHide', this.value)
        },

        // 拖拽插件
        Sortable() {
          const transfer = document.querySelector('.table-list-show')
          const aa = transfer.querySelector('.el-checkbox-group')
          new Sortable(aa, {
            group: {
              name: 'shared',
              pull: [false],
            },
            handle: ".el-checkbox",
            draggable: ".el-checkbox",
            animation: 150,
            onEnd: evt => {
              const { oldIndex, newIndex } = evt
              // 对外暴露出拖拽前后的位置
              this.$emit('changeListIdx', { oldIndex, newIndex })
            }
          })
        }
      },
    };
    </script>
    <style lang="scss" scoped>
    .top-right-btn {
      position: relative;
      .table-list-show {
        box-shadow: 0px 0px 10px #a7a1a1;
        padding: 10px 5px;
        border-radius: 4px;
        top: 36px;
        right: 0px;
        position: absolute;
        z-index: 9999;
        background-color: #fff;
        .el-checkbox {
          padding: 3px 10px;
          width: 100%;
          margin-right: 0;
        }
      }
    }
    </style>


    ```
-   抽离封装可混入的
    ```javascript
    export default {
      data() {
        return {
          loading: false, 
          showSearch: true, // 是否显示搜索框
          pageNum: 1, // 页码
          pageSize: 10, // 页数
          total: 0, //总数
          columns: [], // table最终显示
          columnsHide: [], // 控制工具栏后，确定需要显示
        };
      },
      watch: {
        columnsHide: {
          handler(newV, oldV) {
            this.columns = this.columnsList.filter((item) =>
              newV.includes(item.prop)
            );
          },
          immediate: true,
          deep: true,
        },
      },
      methods: {
        // 改变列表位置
        changeListIdx({ oldIndex, newIndex }) {
          let obj = this.columns.splice(oldIndex, 1);
          this.$nextTick(() => {
            this.columns.splice(newIndex, 0, obj[0]);
          });
        },

        // 切换页
        onChangeNum(val) {
          this.pageNum = val;
          this.getList();
        },

        // 切换行
        onChangeSize(val) {
          this.pageSize = val;
          this.pageNum = 1;
          this.getList();
        },
      },
    };

    ```
-   组件使用
    ```javascript
    <template>
      <div class="layout-content" v-loading="loading">
        <div class="content-header" v-show="showSearch">
          <Searchbox ref="Searchbox" @search="goSearch" @reset="goReset">
          </Searchbox>
        </div>
        <div class="content-toolbar">
          <div class="content-toolbar-left">
            <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="()=>{}"
              v-hasPermi="['system:user:add']">新增</el-button>
            <el-button type="success" plain icon="el-icon-edit" size="mini" @click="()=>{}"
              v-hasPermi="['system:user:edit']">修改</el-button>
            <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="()=>{}"
              v-hasPermi="['system:user:remove']">删除</el-button>
            <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="()=>{}"
              v-hasPermi="['system:user:import']">导入</el-button>
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="()=>{}"
              v-hasPermi="['system:user:export']">导出</el-button> -->
          </div>
          <div class="content-toolbar-right">
            <RightToolbar :showSearch.sync="showSearch" @updateColumnsHide="(val)=>{columnsHide= val}"
              @queryTable="goReset" :columnsList="columnsList" @changeListIdx="changeListIdx">
            </RightToolbar>
          </div>
        </div>
        <div class="content-main">
          <ZwTable :columns="columns" :data="data" :total="total" :pageNum="pageNum"
            :pageSize="pageSize" @onChangeSize="onChangeSize" @onChangeNum="onChangeNum">
            <template #columns="scope">
              <template v-if="scope.prop === 'status'">
                <el-tag type="success">
                  {{dict.label.station_info_status[scope.value]}}
                </el-tag>
              </template>
            </template>
          </ZwTable>
        </div>

        <AddSiteOverview ref="addSiteOverview"></AddSiteOverview>
      </div>
    </template>
    <script>
    import Searchbox from "./search.vue";
    import ZwTable from '@/components/zwTable/index'
    import RightToolbar from '@/components/zwTable/components/RightToolbar/right-toolbar.vue'
    import AddSiteOverview from './components/addSiteOverview'
    import tableConfig from '@/mixin/tableConfig.js'
    import { getListApi } from '@/api/MessageBrowse/SiteOverview.js'
    export default {
      name: "SiteOverview",
      components: { Searchbox, ZwTable, RightToolbar, AddSiteOverview },
      mixins: [tableConfig],
      dicts: ['station_info_status', 'station_remote_type'],
      data() {
        return {
          // showSearch: true,  // 是否显示
          queryForm: {}, // 查询条件
          columnsList: Object.freeze([
            {
              label: "站点",
              prop: "name",
              width: 280
            },
            {
              label: "通信状态",
              prop: "status",
              useSlot: true
            },
            {
              label: "控制模式",
              prop: "controlTypeInfoName",
              width: 120,
            },
            {
              label: "通信最后时间",
              prop: "lastDateTime",
              width: 150,
            },
            {
              label: "电压A",
              prop: "voltageA",
              children: [{
                label: "电压B",
                prop: "voltageB",
                children: [{
                  label: "电压C",
                  prop: "voltageC",
                  useSlot: true
                }]
              },
              ]
            },

            {
              label: "电流1",
              prop: "current1",
              children: [{
                label: "电流2",
                prop: "current2",
                useSlot: true
              },
              {
                label: "电流3",
                prop: "current3", useSlot: true
              },
              {
                label: "电流4",
                prop: "current4", useSlot: true
              },
              {
                label: "电流5",
                prop: "current5", useSlot: true
              },
              {
                label: "电流6",
                prop: "current6", useSlot: true
              },
              {
                label: "电流7",
                prop: "current7", useSlot: true
              },]
            },

            {
              label: "电流8",
              prop: "current8", useSlot: true
            },
            {
              label: "电流9",
              prop: "current9",
              useSlot: true
            },
            {
              label: "手/自动状态",
              prop: "isAutoStatus",
              width: 100,
              useSlot: true
            },
            {
              label: "遥控/自动状态",
              prop: "isRemoteStatus",
              width: 130,
              useSlot: true
            },
            {
              flex: 'right',
              // width: 220,
              label: "操作",
              actions: [
                {
                  id: "view",
                  mold: "view",
                  text: "详情",
                  type: "text",
                  click: this.onView
                },
                // {
                //   id: "edit",
                //   mold: "edit",
                //   text: "编辑",
                //   type: "warning",
                //   click: this.onEdit,
                // },
                // {
                //   id: "delete",
                //   mold: "delete",
                //   text: "删除",
                //   type: "danger",
                //   click: this.delete
                // },
              ],
            },
          ]),
          data: []
        };
      },
      created() {
        this.goSearch();
      },
      mounted() { },
      methods: {
        // 获取列表
        getList() {
          this.loading = true;
          getListApi({
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            ...this.queryForm
          }).then(({ data: res }) => {
            console.log('res获取列表: ', res);
            if (res.code == 200) {
              this.data = res.rows
              this.total = res.total
            } else {
              this.$message.error(res.msg)
            }
          }).finally(() => {
            this.loading = false
          });
        },

        // 查看
        onView(val) {
          this.$refs.addSiteOverview.getInit('查看', val)
        },

        // 编辑
        // onEdit(val) {
        //   console.log("编辑val:", val);
        //   this.$refs.addSiteOverview.getInit("编辑", val);
        // },

        // 新增
        onAdd() {
          this.$refs.addSiteOverview.getInit();
        },

        // 删除
        // delete(id) {
        //   console.log('id: ', id);
        // },


        // 搜索
        goSearch(val = {}) {
          this.pageNum = 1;
          this.pageSize = 10;
          this.queryForm = { ...this.queryForm, ...val };
          this.getList();
        },

        // 重置
        goReset() {
          this.pageNum = 1;
          this.pageSize = 10;
          this.queryForm = {};
          this.getList();
        },


        // 导出
        onImport() {
          console.log("导出");
        },

        // 下载
        onDownload() {
          console.log("下载");
        },

        // 导出
        onDerive() {
          console.log("导出");
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    </style>

    ```