记录vue开发实例

封装的表格组件

<template>
  <div>
    <div style="width: 100%" v-if="showList">
      <el-table v-loading.lock="loading" :data="dataList"
                :header-cell-style="{background: '#F2FCFE',fontSize: '14px',color: '#50606D'}"
                :row-style="{ height: '80px' }" class="menu_table"
                height="550">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column width="1"></el-table-column>
        <li v-for="(item,index) in settingOpts" :key="index">
          <el-table-column :key="Math.random()" :width="item.width" :fixed="item.fixed" :label="item.label">
            <template slot-scope="scope">
              <span v-if="item.isDisplay && item.isDisplay === true">
                {{
                  (scope.row[item.id] && scope.row[item.id] != null && scope.row[item.id] != "") ? scope.row[item.id] : "--"
                }}
              </span>
              <span v-if="item.isNeedMethod && item.isNeedMethod === true">
                {{ $parent.findMethod(item.methodName, scope.row[item.id]) }}
              </span>
              <span v-if="item.isStatus && item.isStatus === true">
                {{ $parent.findMethod(item.statusMethodName,scope.row[item.id]) }}
              </span>
              <span v-if="item.isSpecialStatus && item.isSpecialStatus === true" :class="$parent.findMethod(item.specialClass,scope.row)">
                {{ $parent.findMethod(item.specialMethod,scope.row) }}
              </span>
              <span v-if="item.isNeedBack && item.isNeedBack === true" :class="$parent.findMethod(item.classMethod,scope.row)">
                {{ scope.row[item.displayName] }}
              </span>
              <div v-if="item.isSwitch && item.isSwitch === true">
                <el-switch :value="scope.row[item.id].val" @input="$parent.findMethod(item.switchInfo.switchMethod,scope.row)" :active-value="item.switchInfo.activeVal" :inactive-value="item.switchInfo.inactiveVal" :active-color="item.switchInfo.activeColor" :inactive-color="item.switchInfo.inactiveColor">
                </el-switch>
              </div>
              <div v-if="item.isImg && item.isImg === true">
                <p v-if="(!scope.row[item.id] || scope.row[item.id] == null || scope.row[item.id].length== '')">暂无人脸</p>
                <el-popover v-else aria-placeholder="top-start" trigger="hover">
                  <div class="row_reserve">
                    <img class="big-mig" :src="scope.row[item.id]">
                  </div>
                  <div slot="reference">
                    <img style="width: 50px;height: 50px;" :src="scope.row[item.id]">
                  </div>
                </el-popover>
              </div>
              <div v-if="item.isOperation && item.isOperation === true" class="flex jc-sa">
                <div v-for="(child,index) in item.operationOpts" :key="index" v-if="showOperation(child,scope)" style="color: #0080F7; cursor: pointer">
                  <span @click="$parent.findMethod(child.method,scope.row)">
                    {{ child.isNeedSpecial && child.isNeedSpecial === true ? $parent.findMethod(child.specialDisplay,scope.row) : child.name}}
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>
        </li>
        <template slot="empty">
          <div class="aic mt-20 mb-20">
            <img src="@/assets/empty.png" style="width: 45px; height: 36px" alt="" />
            <p style="margin: 0;font-size: 14px;height: 16px;line-height: 16px;color: #aba9bb;">暂无数据</p>
          </div>
        </template>
      </el-table>
    </div>
  </div>
</template>
 
      <script>
      /*
 
       项目列表参数属性详解
 
      * id String 用于关联props的属性名称
      * label String table中展示的列名
      * fixed Boolean/String 是否固定列,true默认左固定，可接收left或right
      * isDisplay Boolean 该属性是否可以直接用于展示
      * isNeedMethod Boolean 该属性是否需要经过自定义加工
      * methodName String/Object 自定义加工方法，若isNeedMethod为true,则须提供方法名称,不需要就默认null。
      * isStatus Boolean 该属性是否为状态值
      * statusMethodName String 目前状态的返回值在各列表中不统一，情况多样，所以单独提供一个加工方法。
      * isSpecialStatus Boolean 该状态是否需要特殊展示
      * specialClass String 特殊展示时的样式
      * specialMethod String 特殊展示时的方法（有些可能需要特殊处理）
      * isSwitch Boolean 是否为Switch开关类型
      * switchInfo Object switch开关需要用到的信息（激活值、颜色等）,可参考客户（customer）模块
        Eg:switchInfo: {
            activeVal: "0",
            inactiveVal: "1",
            activeColor: "#13ce66",
            inactiveColor: "#DCDFE6",
            switchMethod: "updateCustomerStatus",
          },
      * isOperation Boolean 是否为操作列
      * operationOpts Array