21.element el-table表格以及树形表格封装

21.element el-table表格以及树形表格封装

1.效果图

• 树形表格效果图
  
• 普通表格效果图
  

2.表格组件

组件名称:YpTable.vue
组件内容：当然有其他的需要加的可以自行添加一些其他类型

<template>
  <el-table :data="list" stripe border :default-expand-all="expand" row-key="id" :tree-props="{ children: children }">
    <!-- 循环表格标签以及类型 -->
    <el-row v-for="(item, index) in propArr" :key="index">
      <!-- 当父组件的type值等于'img'表示此列显示图片 -->
      <el-table-column v-if="item.type === 'img'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope">
          <img style="width:50px;height:50px" :src="scope.row[props]" alt="" />
        </template>
      </el-table-column>
      <!-- 当父组件的type值等于'icon'表示此列显示图标 -->
      <el-table-column v-else-if="item.type === 'icon'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope">
          <i :class="scope.row[item.props]"></i>
        </template>
      </el-table-column>
      <!-- 当父组件的type值等于'select'表示此列显示checkbox -->
      <el-table-column v-else-if="item.type === 'select'" type="selection" width="50"> </el-table-column>
      <!-- 当父组件的type值等于'switch'表示此列显示开关 -->
      <el-table-column v-else-if="item.type === 'switch'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row[item.props]" @change="servicePublishChange(scope.row)"> </el-switch>
        </template>
      </el-table-column>
      <!-- 当父组件的type值等于'operation'表示此列显示操作以及按钮相关 -->
      <el-table-column v-else-if="item.type === 'operation'" :label="item.label" align="center" width="300">
        <template slot-scope="scope">
          <el-button v-for="(btn, indexs) in item.operationList" :key="indexs" @click="handleButton(btn.methods, scope.row)" :type="btn.type" :icon="btn.icon"> {{ btn.label }}</el-button>
        </template>
      </el-table-column>
      <!-- 当父组件的type值等于'status'表示此列显示在父组件经过判断转化之后的值 -->
      <el-table-column v-else-if="item.type === 'status'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope">
          {{ item.render(scope.row) }}
        </template>
      </el-table-column>
      <!-- 当父组件的type值等于'tag'表示此列显示在父组件经过判断转化之后的tag标签，功能同上 -->
      <el-table-column v-else-if="item.type === 'tag'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope">
          <el-tag type="primary">{{ item.render(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <!-- 当父组件的type值等于'time'表示此列显示时间格式化 -->
      <el-table-column v-else-if="item.type === 'time'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope"> {{ item.formatter(scope.row) | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }} </template>
      </el-table-column>
      <!-- 当父组件的type值等于'index'表示此列显示索引值 -->
      <el-table-column v-else-if="item.type === 'index'" type="index" align="center"></el-table-column>
      <!-- 显示默认值 -->
      <el-table-column v-else :prop="item.props" :label="item.label" align="center"></el-table-column>
    </el-row>
  </el-table>
</template>
<script>
import { parseTime } from '@/filters/format.js'
// import func from '../../../vue-temp/vue-editor-bridge'
export default {
  computed: {},
  props: {
    //  父组件传递过来的表格数据
    listInfo: {
      type: Array
    },
    // 父组件传递过来的表格头部以及type类型值
    propArr: {
      type: Array
    },
    // 是否是树形结构，父组件不传，默认是普通表格而不是树表格
    children: {
      type: String,
      default: ''
    },
    // 树形表格是否展开，默认为'不展开'
    expand: {
      type: Boolean,
      default: false
    }
  },
  // 时间格式过滤器
  filters: {
    parseTime(time, cFormat) {
      return parseTime(time, cFormat)
    }
  },
  created() {
    parseTime()
  },

  data() {
    return {
      list: [] // 父组件传递过来的表格数据
    }
  },
  methods: {
    //   滑块事件
    servicePublishChange(row) {
      this.$emit('swichChange', row)
    },
    // 增加删除事件
    handleButton(methods, row) {
      // 删除按钮
      if (methods === 'delete') {
        this.$emit('deleteEvent', row)
      } else if (methods === 'edit') {
        // 编辑按钮
        this.$emit('editEvent', row)
      } else if (methods === 'addChild') {
        // 添加子功能按钮
        this.$emit('addChildEvent', row)
      } else {
        // 查看详情按钮
        this.$emit('detail', row)
      }
    }
  },
  watch: {
    listInfo: function(val) {
      this.list = val
    }
  }
}
</script>

4.时间格式过滤器

文件名称:format.js
作用：用来格式化表格中的时间格式

/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * Parse the time to string
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string | null}
 */

export function parseTime(time, cFormat) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string') {
      if (/^[0-9]+$/.test(time)) {
        // support "1548221490638"
        time = parseInt(time)
      } else {
        // support safari
        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
        time = time.replace(new RegExp(/-/gm), '/')
      }
    }

    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const timeStr = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    return value.toString().padStart(2, '0')
  })
  return timeStr
}

4.使用表格组件

父组件

<template>
  <div>
    <el-row>
      <el-button type="primary" @click="showDialog">{{ $t('lang.newApplications') }}</el-button>
    </el-row>
    <!-- 其中chilren="permissions" 表示你树形数据中的子数据名称就可以，普通都是‘children’,如果传值表示是树形表格，如果不传值，就表示是普通表格，注意此处没有属性绑定，传给子组件的是普通字符串，expand表示树形是否展开，此处必须属性绑定，原型：这是一个布尔值，如果非树表结构，expand传不传都不受影响！-->
    <yp-table :listInfo="permissionList" :propArr="permissionListLabel" children="permissions" :expand="true" @addChildEvent="addChildEvent"></yp-table>
  </div>
</template>

<script>
import YpTable from '@/components/table/YpTable.vue'
export default {
  components: {
    YpTable
  },
  data() {
    return {
      permissionList: [],
      dialogVisible: false
    }
  },
  computed: {
    permissionListLabel() {
      return [
      // 此处的表格标签内容，这里我放置了计算属性中，是为了解决国际化实时变化切换语言的。如果你没有用国际化，你也可以放置data中定义，其中label:this.$t('lang.....') 是我用的语言包中定义的文字，你直接可以写为：label:'表格标题...'
        {
          props: 'operation',
          label: this.$t('lang.operation'),
          type: 'operation',
          operationList: [
            { type: 'text', label: this.$t('lang.addChildFun'), icon: '', methods: 'addChild', actions: { aciton: 'edit' } },
            { type: 'text', label: this.$t('lang.edit'), icon: 'el-icon-edit-outline', methods: 'edit', actions: { aciton: 'edit' } },
            { type: 'text', label: this.$t('lang.delete'), icon: 'el-icon-delete', methods: 'delete', actions: { aciton: '' } }
          ]
        },
        {
          props: 'name',
          label: this.$t('lang.name')
        },
        {
          props: 'displayOrder',
          label: this.$t('lang.displayOrder')
        },
        {
          type: 'icon',
          props: 'logo',
          label: this.$t('lang.icon')
        },
        {
          props: 'url',
          label: this.$t('lang.url')
        },
        {
          props: 'description',
          label: this.$t('lang.description')
        },
        {
          props: 'type',
          label: this.$t('lang.type'),
          type: 'tag',
          render: res => {
            if (res.type === '1') {
              return this.$t('lang.application')
            } else if (res.type === '2') {
              return this.$t('lang.menu')
            } else {
              return this.$t('lang.button')
            }
          }
        },
        {
          props: 'permissionKey',
          label: this.$t('lang.key')
        }
      ]
    }
  },
  created() {
    this.$api.getPermissionApi.getPermissionList().then(res => {
      console.log(res.data.data)
      this.permissionList = res.data.data
    })
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    addChildEvent(val) {
      console.log(val)
      if (val.type === '3') {
        return this.$notify({
          title: '警告',
          message: '按钮底下不允许新增子功能',
          type: 'warning'
        })
      }
    }
  }
}
</script>

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

初来乍到！有好的想法和指导可以提，我们共同进步！！！