vue-element-admin 封装的公共table

最新推荐文章于 2023-11-04 17:06:52 发布

原创最新推荐文章于 2023-11-04 17:06:52 发布 · 618 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该代码示例展示了如何在Vue.js中创建一个带有动态列的表格组件。表格支持图片展示、启用/禁用开关、操作按钮以及时间格式化。每一列的类型可以通过props传递，允许自定义事件处理。

<template>
  <el-table
    :key="tableKey"
    v-loading="loading"
    :data="data"
    border
    fit
    highlight-current-row
    size="mini"
  >
    <el-table-column
      v-for="(item, index) in cols"
      :key="index"
      :label="item.title"
      :prop="item.field"
      :width="item.width"
      :fixed="item.fixed"
      align="center"
      size="mini"
    >
      <template slot-scope="scope">
        <!--          图片-->
        <span v-if="item.type === 'image'">
          <img
            :src="scope.row[item.field]"
            style="cursor: pointer"
            alt="图片"
            height="50"
            width="50"
            @click="item.event(index, scope.row)"
          >
        </span>

        <!--          启用/禁用-->
        <span v-else-if="item.type === 'enable'">
          <el-switch
            v-model="scope.row[item.field]"
            :active-value="1"
            :inactive-value="0"
            name="is_enable"
            @change="item.event(index, scope.row)"
          />
        </span>

        <!--          操作-->
        <el-button-group size="mini" v-else-if="item.type === 'operate'">
          <el-button
            v-for="(operate_item, operate_index) in item.buttons"
            :key="operate_index"
            @click="operate_item.event(index, scope.row)"
            type="primary"
            size="mini"
            round
          >{{ operate_item.name }}</el-button>
        </el-button-group>

        <!--          时间-->
        <span v-else-if="item.type === 'datetime'">{{ scope.row[item.field] | datetimeFormat }}</span>

        <!--          其他-->
        <span v-else>{{ scope.row[item.field] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { format } from '@/common/format'
export default {
  name: 'ListTable',
  filters: format,
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    cols: {
      type: Array,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    tableKey: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>

</style>