element-ui Table二次封装

element-ui Table二次封装

<template>
  <div class="slTable">
    <el-table :data="data" border style="width: 100%" v-loading="loading">
      <!--序号区域-->
      <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
      <!--数据列区域-->
      <el-table-column
        :label="item.label"
        :width="item.width ? item.width :''"
        :min-width="item.min_width ? item.min_width :''"
        :show-overflow-tooltip="item.overflow ?true : false"
        :align="item.align ? item.align : 'left'"
        v-for="(item, index) in title"
        :key="index"
        :class-name="item.className ? item.className : ''"
      >
        <template slot-scope="scope">
          <!-- 文本区域 -->
          <span>{{scope.row[item.prop]}}</span>
          <!-- 文本转换区域 -->
          <span v-if="item.shift">
            <span v-for="(item1, index) in item.shiftList" :key="index">
              <span v-if="scope.row[item.shift]==item1.value">{{item1.text}}</span>
            </span>
          </span>
          <!-- 循环文本区域 -->
          <span v-if="item.parentName">
            <span
              v-for="(item1, index) in scope.row[item.parentName]"
              :key="index"
            >{{item1[item.childName]}}</span>
          </span>
          <!-- Switch 开关区域 -->
          <el-switch
            v-if="item.switch"
            v-model="scope.row[item.switch]"
            :active-color="item.activeColor ? item.activeColor : '#13ce66'"
            :inactive-color="item.activeColor ? item.activeColor :'#ff4949'"
            :active-value="item.active"
            :inactive-value="item.inactive"
            @change="change(scope.row,'switch')"
          ></el-switch>
          <!-- 标签区域 -->
          <el-tag :type="item.type ? item.type : ''" v-if="item.tag">{{scope.row[item.tag]}}</el-tag>
          <!-- 标签转换区域 -->
          <span v-if="item.tagShift">
            <span v-for="(item1, index) in item.shiftList" :key="index">
              <el-tag
                :type="item.type ? item.type : ''"
                v-if="scope.row[item.tagShift]==item1.value"
              >{{item1.text}}</el-tag>
            </span>
          </span>
        </template>
      </el-table-column>
      <!-- 按钮区域 -->
      <el-table-column
        :label="buttomTitle ? buttomTitle : '操作'"
        :width="buttomWidth ? buttomWidth : button.length*80"
        v-if="button"
      >
        <template slot-scope="scope">
          <!-- v-if="scope.row[item.value]==item.text" -->
          <span>
            <el-button
              :type="item.type ? item.type : ''"
              :size="item.size ? item.size : ''"
              v-for="(item, index) in button"
              :key="index"
              :icon="item.icon ? item.icon : ''"
              @click="click(scope.row,item.name)"
            >{{item.name}}</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      v-if="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page ? pagination.page : 1"
      :page-sizes="pagination.sizes"
      :page-size="pagination.size ? pagination.size : 10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total ? pagination.total:0"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    };
  },
  props: {
    data: Array,
    title: Array,
    button: Array,
    buttomTitle: String,
    buttomWidth: Number,
    pagination: Object
  },
  watch: {
    data() {
      this.loading = false;
      console.log(1);
    }
  },
  methods: {
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$emit("change", val, "page");
      this.loading = true;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("change", val, "size");
      this.loading = true;
    },
    click(data, item) {
      this.$emit("change", data, item);
      this.loading = true;
    },
    change(data, item) {
      this.$emit("change", data, item);
      this.loading = true;
    }
  }
};
</script>

用的时候直接引入这个组件，用json就能实现自动表格

<template>
<el-card>
  <sl-table
    @change="change"
    :data="tableData"
    :title="title"
    :button="buttom"
    buttomTitle="操作"
    :pagination="pagination"
  ></sl-table>
</el-card>
</template>

<script>
import slTable from './slTable'
export default {
components: {
  slTable
},
data() {
  return {
    title: [
      { label: '姓名', prop: 'name' },
      { label: '地址', prop: 'address', overflow: true },
      { label: '时间', prop: 'date' },
      {
        label: '备注',
        childName: 'name',
        parentName: 'parentName',
        overflow: true
      },
      {
        label: '备注',
        shift: 'active',
        shiftList: [{ value: 1, text: '是' }, { value: 0, text: '否' }]
      },
      {
        label: '备注',
        tagShift: 'active',
        shiftList: [{ value: 1, text: '是' }, { value: 0, text: '否' }]
      },
      { label: '状态', switch: 'active', active: 1, inactive: 0 }
    ],
    buttom: [{ name: '删除',size:"mini" }, { name: '修改',size:"mini"}, { name: '删除' ,size:"mini"}],
    pagination:{

    },
    tableData: [
      {
        date: '2016-05-03',
        name: '张三',
        address: '上海市普陀区金沙江路 1518 弄',
        parentName: [
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' }
        ],
        active: 1
      },
      {
        date: '2016-05-03',
        name: '张三',
        address: '上海市普陀区金沙江路 1518 弄',
        parentName: [
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' }
        ],
        active: 0
      },
      {
        date: '2016-05-03',
        name: '张三',
        address: '上海市普陀区金沙江路 1518 弄',
        parentName: [
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' },
          { name: '张三' }
        ],
        active: 1
      }
    ]
  }
},
methods: {
  change(data, item) {
    console.log(data, item)
  }
}
}
</script>

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