element ui 的Table封装公共组件！

由于在做项目的时候，很多表格都是一样的格式，我们每次引入这样很浪费空间，将代码量上涨，不如将表格进行封装成一个公共的组件，便于我们随时随刻的调用。

table封装一这是一个简单演示

在这里去调用组件

这是引用

对于表格操作的event对象

这是关于表格的一些操作

这是关于表格两项配置colums 和 operation(根据需求，有操作可配置，无操作给operation:[])

在这里插入图片描述

下面是封装的公共table组件
<template>
  <div class="table-container">
    <el-table
      :data="data"
      style="width: 100%"
      :header-cell-style="tableHeaderColor"
      border
    >
      <el-table-column
        type="selection"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        type="index"
        align="center"
        label="序号"
        :width="numWidth"
      ></el-table-column>
      <el-table-column
        align="center"
        v-for="(item, index) in columns"
        :key="index"
        :sortable="item.sort"
        :prop="item.attrName"
        :label="item.label"
        :width="item.width"
      >
        <template slot-scope="scope">
          <div class="table-item-group">
            <!-- 用户状态 -->
            <span
              v-if="item.isType === 'status'"
              :class="[
                scope.row[item.attrName] === 1
                  ? 'status-dot-grean'
                  : 'status-dot-red',
              ]"
            ></span>
            <!-- bug状态 -->
            <span
              v-if="item.isType === 'bugstatus'"
              :class="[
                scope.row[item.attrName] === 1
                  ? 'status-dot-grean'
                  : 'status-dot-red',
              ]"
            ></span>
            <!--  bug图片 -->
            <el-popover
              v-if="item.isBug === 'bug'"
              placement="left-end"
              trigger="hover"
            >
              <!--trigger属性值：hover、click、focus 和 manual-->
              <a
                :href="scope.row[item.attrName]"
                target="_blank"
                title="查看最大化图片"
              >
                <img
                  :src="scope.row[item.attrName]"
                  style="width: 300px; height: 300px"
                />
              </a>
              <img
                slot="reference"
                :src="scope.row[item.attrName]"
                style="width: 50px; height: 50px; cursor: pointer"
              />
            </el-popover>
            <span
              class="btn-type"
              v-else-if="item.eventType === 'toBug'"
              @click="operateType(item.eventType, scope.row)"
            >{{ checkType(item.isType, scope.row[item.attrName])}}</span>
            <span class="normal-text" v-else>{{
              checkType(item.isType, scope.row[item.attrName])
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="operation.length > 0"
        align="center"
        label="操作"
        :width="operationWidth"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              size="mini"
              v-for="(item, index) in operation"
              :key="index"
              :type="item.type"
              :icon="item.icon"
              :title="item.operateName"
              @click="operateType(item.opreatetype, scope.row, scope.$index)"
              circle
            ></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "commontable",
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    operation: {
      type: Array,
      default: () => [],
    },

    operationWidth: {
      type: Number,
      default: () => 0,
    },
    numWidth: {
      type: Number,
      default: () => 0,
    },
  },
  data() {
    return {};
  },
  components: {},
  mounted() {},
  methods: {
    // 修改table header的背景色
    tableHeaderColor() {
      return "background-color: #F4F4F4;";
    },
    operateType(type, value, index) {
      this.$emit("operate", { type: type, value: value, index: index });
    },

    checkType(type, value) {
      let label = "";
      switch (type) {
        case "status": //状态：是否启用
          if (value == 1) {
            label = "启用";
          } else {
            label = "禁用";
          }
          break;
        case "bugstatus": //BUG 的状态
          if (value == 1) {
            label = "未关闭";
          } else {
            label = "关闭";
          }
          break;
        default:
          label = value;
      }
      return label;
    },
  },
};
</script>
	
<style scoped lang="scss">
.table-container {
  position: relative;
  width: 100%;
}

.btn-type {
  color: $title_color;
  cursor: pointer;
  &:hover {
    color: $auto_primary_color;
  }
}
.normal-text {
  color: $title_color;
}
.opreate-btn {
  cursor: pointer;
  color: $subtitle_color;
  font-size: 18px;
  margin-right: 10px;
  &:hover {
    opacity: 0.8;
  }
}
.status-dot-grean {
  background: #6dd400;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 5px;
}
.status-dot-red {
  background: #e02020;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 5px;
}
.table-item-group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>

table封装二

采用插槽的方式将操作栏抽离
<v-Table
      :tableData="tableData"
      :title="columns"
      @operate="dataOperation"
      :gg="false"
    >
      <template slot="dealScreenshot" slot-scope="scope">
        <el-button
          size="small"
          type="text"
          @click="handleRowEdit(scope.$index, scope.row)"
          >查看</el-button
        >
        <el-button
          size="small"
          type="text"
          @click="handleRowEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="text"
          @click="handleRowEdit(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </v-Table> 
  data(){
    return {
    columns: [
        {
          prop: 'name',
          label: '用户名',
        },
        {
          prop: 'roleId',
          label: '用户角色',
          eventType: 'type',
        },
        {
          prop: 'status',
          label: '用户状态',
          isType: 'status',
        },
        {
          prop: 'dealScreenshot', //要与上面预留的slot位置一致
          label: '操作',
          operate: true,
        },
      ],
    }

公共表格组件二

<template>
  <div>
    <!-- 中部列表表格 -->
    <el-table
      :data="tableData"
      :header-cell-style="tableHeaderColor"
      highlight-current-row
      border
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
        v-if="gg ? true : false"
      ></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        align="center"
        v-for="(itemtest, index) in title"
        :key="index"
        v-if="!itemtest.operate"
        :sortable="itemtest.sort"
        :prop="itemtest.attrName"
        :label="itemtest.label"
        :width="itemtest.width"
      >
        <template slot-scope="scope">
          <div class="table-item-group">
            <!-- 配置启用禁用的颜色 -->
            <i
              v-if="itemtest.isType === 'status'"
              :class="[
                scope.row[itemtest.prop] === 1
                  ? 'status-dot-grean'
                  : 'status-dot-red',
              ]"
              class="el-icon-message-solid"
            ></i>
            <!-- 表格中具体的某一项点击事件 -->
            <span
              class="btn-type"
              v-if="itemtest.eventType"
              @click="operateType(itemtest.eventType, scope.row, scope.$index)"
              >{{ checkType(itemtest.isType, scope.row[itemtest.prop]) }}</span
            >
            <!-- 正常表格渲染数据 -->
            <span class="normal-text" v-else>{{
              checkType(itemtest.isType, scope.row[itemtest.prop])
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :label="itemtest.label"
        :width="itemtest.width"
        :prop="itemtest.prop"
        align="center"
      >
        <template slot-scope="scope">
          <slot
            :name="itemtest.prop"
            :$index="scope.$index"
            :row="scope.row"
          ></slot>
          <!-- 对应slot name -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tabletable',
  props: {
    title: {
      type: Array,
      default: [],
    },
    tableData: {
      type: Array,
      default: [],
    },
    gg: Boolean,
  },
  methods: {
    // 修改table header的背景色
    tableHeaderColor() {
      return 'background-color: #F4F4F4;'
    },
    operateType(type, value, index) {
      this.$emit('operate', { type: type, value: value, index: index })
    },
    checkType(type, value) {
      let label = ''
      switch (type) {
        case 'teskType': //测试任务类型
          if (value === 1) {
            label = '功能测试'
          } else if (value === 2) {
            label = '性能测试'
          } else if (value === 3) {
            label = '稳定性测试'
          }
          break
        case 'status': //状态：是否启用
          if (value == 1) {
            label = '启用'
          } else {
            label = '禁用'
          }
          break
        default:
          label = value
      }
      return label
    },
  },
}
</script>

<style scoped lang="scss">
.normal-text {
  color: $title_color;
}
.btn-type {
  color: $title_color;
  cursor: pointer;
  &:hover {
    color: $auto_primary_color;
  }
}
.status-dot-grean {
  color: #6dd400;
}
.status-dot-red {
  color: #e02020;
}
.table-item-group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue