el-table的封装。

最新推荐文章于 2024-11-22 10:03:21 发布

全栈科学家

最新推荐文章于 2024-11-22 10:03:21 发布

阅读量712

点赞数

分类专栏：前端文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_52856519/article/details/129836172

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

文章展示了两种不同的el-table组件封装方式，作者比较了他人封装的组件与自己封装的组件，认为自己封装的组件在使用时更简洁。作者的组件包含标题、多选、表头定义等功能，并提供了自定义操作列的插槽，简化了使用者的代码。同时，文章提供了示例数据和分页组件的代码片段。

摘要由CSDN通过智能技术生成

别人的：

封装：

        <el-table
            :data="tableData"
            style="width: 100%"
            border
            height='500'
            max-height='500'
            :header-cell-style=" {background:'#5987CF',color:'white',textAlign:'center',lineHeight:'30px',padding:'0'}"
            :cell-style="{'text-align':'center','line-height':'20px'}"
            >
            <!-- 单选多选框插槽 -->
            <slot name="chekAll"></slot> 
            <el-table-column
            v-for="item,index in tableTitle"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :fixed="item.fixed"
            >
            <template slot-scope="scope">
            <!-- 特殊需求 -->
                <slot name="demand" :scope="scope" :item="item"></slot>
            </template>
            </el-table-column>
    </el-table>

使用：

 <Table :tableTitle="tableTitle" :tableData="tableData">
        <template #chekAll>
            <el-table-column type="selection" width="55"></el-table-column>
        </template>
        <template v-slot:demand="{scope,item}">
                 <el-input v-if="item.prop == 'sy_jianshu'" v-model="scope.row.prop" />   
                 <el-button v-else-if="item.label == '操作'">删除</el-button>    
                 <span v-else>{{scope.row[item.prop]}}</span>         
        </template>
</Table>

这是我随便找的一个别人封装的。我自己看着感觉就不太喜欢。因为啥呢？因为使用的时候麻烦得一批。代码较多，正常使用都得带上插槽那部分。。。

自己的：

封装：

<template>
  <div class="tab_box">
    <div v-if="showTitle" class="title">
      {{ title }}
      <slot class="right" name="title_A" :scope="tableData"></slot>
    </div>
    <el-table
      ref="table"
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column
        v-if="checked"
        type="selection"
        width="55"
        align="center"
      >
      </el-table-column>
      <template v-for="(item, index) in column">
        <el-table-column
          v-if="item.prop != 'TableAction'"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
        <template  slot-scope="scope">
            <slot v-if="item&&item.action" :name="item.prop" :scope="scope"></slot>
            <span v-else>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template slot-scope="scope">
            <slot name="action" :scope="scope"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :pagination="pagination"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    />
  </div>
</template>
<script>
import Pagination from "@/components/common/Pagination.vue";
export default {
  name: "PublicTable",
  components: {
    Pagination
  },
  props: {
    title: {
      // 标题，默认为空
      type: String,
      default: ""
    },
    showTitle: {
      // 是否显示表格上方标题，默认不显示
      type: Boolean,
      default: false
    },
    checked: {
      // 是否能够多选
      type: Boolean,
      default: false
    },
    tableData: {
      // 表格数据
      type: Array,
      default: () => []
    },
    pagination: {
      type: Object,
      default: () => ({
        pageIndex: 1,
        pageSize: 10,
        total: 0
      })
    },
    column: {
      // 表头设定，egg：{ prop: 'date', label: '日期',width：900 }
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      
    };
  },
  created() {},
  methods: {
    sizeChange(value) {
      // 大小改变
      this.$emit("sizeChange", value);
    },
    currentChange(value) {
      // 改变当前页
      this.$emit("currentChange", value);
    },
    handleSelectionChange(val) {
      // 勾选动作
      if (this.checked) {
        this.$emit("handleSelectionChange", value);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.tab_box {
  background: white;
  .title {
    margin: 10px;
    padding-left: 10px;
    padding-top: 10px;
    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 12px;
      background: blue;
      // vertical-align: middle;
    }
  }
}
/deep/.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: bold;
  text-align: right;
}
.right {
  float: right;
}
</style>

使用：

<public-table
        :showTitle="true"
        :title="'合同列账状态统计图'"
        :tableData="tableData"
        :column="column"
        :checked="false"
        :pagination="pagination"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      >
      <!-- 不是对最后操作行操作，用这个，column加上action，不需要操作，不加下面这个,slot为当前的prop -->
      <template slot="name" slot-scope="{scope}">
          <span style="color:blue;" @click="delete_scope(scope)">{{scope.row.name}}</span>
        </template>
        <template slot="date" slot-scope="{scope}">
          <span style="color:red;" @click="delete_scope(scope)">{{scope.row.date}}</span>
        </template>
        <template slot="action" slot-scope="{scope}">
          <el-button @click="delete_scope(scope)">删除</el-button>
        </template>
      </public-table>

别人封的我没用过，实际效果不予置评，我自己的有个别没用的地方请自行忽略修改，少了地方自从添加，应该不难的，我相信你。封装的页面还有可以优化的地方，懒得弄了。有兴趣的可以改改。哦对了，再把数据搞出来吧，免得有些小兄弟云里雾里。

tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄弄",
          zip: 200333
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ],
const column = [
  { prop: "date", label: "日期",action:true },
  { prop: "name", label: "名字",action:true },
  { prop: "address", label: "地址" },
  { prop: "TableAction", label: "操作" }
];

哦，对了，突然发现分页也是封装好的，代码如下：

<template>
  <div class="table-pagination">
    <el-pagination
      :current-page="pagination.pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="sizeChange"
      @current-change="currentChange"
      background
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    pagination: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    sizeChange (value) {
      this.$emit('sizeChange', value)
    },
    currentChange (value) {
      this.$emit('currentChange', value)
    }
  }
}
</script>

<style scoped>
</style>

一样的道理，缺陷肯定是有的，改改用用吧