• VUE+ELEMENT-UI的后台项目封装组件--table的封装


    最近项目打算重构,项目的模块几乎都是以后台查询展示的传统的增删改差模式,所以卑微的我想要自己封装一下table,

    效果图

    子组件:

    <!--
     * @Descripttion: 
     * @version: 
     * @Author: sueRimn
     * @Date: 2020-06-18 17:40:26
     * @LastEditors: sueRimn
     * @LastEditTime: 2020-06-19 15:24:39
    -->
    <template>
      <div class="table">
        <el-table
          :data="tableData"
          style=" 100%"
          border
          min-width="1190"
          max-height="300"
          :header-row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
          @row-click="clickTable"
        >
          <template v-for="(item, index) of columns">
            <el-table-column
              v-if="item.id === 'text'"
              :key="index"
              :fixed="item.fixed"
              :prop="item.id"
              :label="item.label"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
            >
              <!--if判断的是父组件传的表头是操作的id名-->
              <template slot-scope="scope">
                <el-button
                  v-for="item1 in item.list"
                  :key="item1.id"
                  @click="handleDelete(scope.row, item1.id)"
                  type="text"
                  size="small"
                  >{{ item1.name }}</el-button
                >
                <!--可以自行增加按钮,请改变点击事件的第二个参数,父组件会根据第二个参数判断当前点击的是什么按钮-->
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.id === 'button'"
              :key="index"
              :fixed="item.fixed"
              :prop="item.id"
              :label="item.label"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
            >
              <!--if判断的是父组件传的表头是操作的id名-->
              <template slot-scope="scope">
                <el-button
                  v-for="item2 in item.list"
                  :key="item2.id"
                  @click="handleEdit(scope.row, item2.id)"
                  size="mini"
                  :type="item2.type"
                  >{{ item2.name }}</el-button
                >
                <!--可以自行增加按钮,请改变点击事件的第二个参数,父组件会根据第二个参数判断当前点击的是什么按钮-->
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.index === 'index'"
              :type="item.index"
              :key="index"
              :width="item.width"
            >
            </el-table-column>
            <el-table-column
              v-else
              :label="item.label"
              :key="index"
              :fixed="item.fixed"
              :prop="item.id"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
              :type="item.type"
            >
            </el-table-column>
            <!--可以传align,width和type来控制表格的居中,宽度和类型(比如需要序号,type传index)-->
          </template>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pagesizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
    <script>
    export default {
      props: {
        tableData: {
          // 表格数据源 默认为空数组
          type: Array,
          default: () => []
        },
        columns: {
          // 表格的字段展示 默认为空数组
          type: Array,
          default: () => []
        },
        pagesizes: {
          type: Array,
          default: () => []
        },
        total: { type: Number, default: 0 },
        pageSize: { type: Number, default: 0 }
      },
      data() {
        return {
          currentPage: 1
        };
      },
      methods: {
        // 正常
        handleSelectionChange(val) {
          this.$emit("handleSelectionChange", { val: val });
        },
        // 正常
        clickTable(row, column, event) {
          this.$emit("clickTable", { row: row, column: column, event: event });
        },
        // 正常
        handleEdit(index, row) {
          this.$emit("handleEdit", { index: index, row: row });
        },
        // 正常
        handleDelete(index, row) {
          this.$emit("handleDelete", { index: index, row: row });
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.$emit("handleSizeChange", val);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.$emit("handleCurrentChange", val);
        },
        tableRowClassName({ row, rowIndex }) {
          console.log(row, rowIndex);
          if (rowIndex === 0) {
            return "warning-row";
          } else if (rowIndex === 1) {
            return "warning-row";
          }
          return "";
        }
      }
    };
    </script>
    <style lang="less">
    .el-pagination {
      margin-top: 20px;
    }
    //.warning-row .is-leaf 是修改table的表头的背景颜色;
    .warning-row .is-leaf { color: #1a68b5; background-color: #e3edf7 !important; } </style>

    父组件调用
      1 <flight-table
      2           :tableData="tableData"
      3           :columns="columns"
      4           :pagesizes="pagesizes"
      5           @handleDelete="handleDelete"
      6           @handleSelectionChange="handleSelectionChange"
      7           @clickTable="clickTable"
      8           @handleEdit="handleEdit"
      9           @handleSizeChange="handleSizeChange"
     10           @handleCurrentChange="handleCurrentChange"
     11           :total="total"
     12           :pageSize="pageSize"
     13 ></flight-table>
     14 import flightTable from "@/components/flightTable.vue";
    import jsondata from "assets/json/vue.json";

    15 export default{
     16   components: {
     17     flightTable ,
     18  19   },
     20     data() {
     21         return {
     22            tableData: [
     23         {
     24           date: "2016-05-03",
     25           name: "王小虎",
     26           province: "上海",
     27           city: "普陀区",
     28           address: "上海市普陀区金沙江路 1518 弄",
     29           zip: 200333
     30         },
     31         {
     32           date: "2016-05-02",
     33           name: "王小虎",
     34           province: "上海",
     35           city: "普陀区",
     36           address: "上海市普陀区金沙江路 1518 弄",
     37           zip: 200333
     38         },
     39         {
     40           date: "2016-05-04",
     41           name: "王小虎",
     42           province: "上海",
     43           city: "普陀区",
     44           address: "上海市普陀区金沙江路 1518 弄",
     45           zip: 200333
     46         },
     47         {
     48           date: "2016-05-01",
     49           name: "王小虎",
     50           province: "上海",
     51           city: "普陀区",
     52           address: "上海市普陀区金沙江路 1518 弄",
     53           zip: 200333
     54         },
     55         {
     56           date: "2016-05-08",
     57           name: "王小虎",
     58           province: "上海",
     59           city: "普陀区",
     60           address: "上海市普陀区金沙江路 1518 弄",
     61           zip: 200333
     62         },
     63         {
     64           date: "2016-05-06",
     65           name: "王小虎",
     66           province: "上海",
     67           city: "普陀区",
     68           address: "上海市普陀区金沙江路 1518 弄",
     69           zip: 200333
     70         },
     71         {
     72           date: "2016-05-07",
     73           name: "王小虎",
     74           province: "上海",
     75           city: "普陀区",
     76           address: "上海市普陀区金沙江路 1518 弄",
     77           zip: 200333
     78         }
     79       ],
     80       columns: [
     81         {
     82           id: "selection",
     83           type: "selection",
     84           label: "",
     85           fixed: "left",
     86            "55",
     87           prop: "",
     88           isShow: true,
     89           align: "center"
     90         },
     91         {
     92           id: "button",
     93           type: "button",
     94           label: "操作",
     95           fixed: "left",
     96            "200",
     97           prop: "",
     98           isShow: true,
     99           align: "center",
    100           list: [
    101             {
    102               id: "examine",
    103               name: "查看",
    104               type: ""
    105             },
    106             {
    107               id: "compile",
    108               name: "编辑",
    109               type: "danger"
    110             }
    111           ]
    112         },
    113         {
    114           id: "text",
    115           type: "text",
    116           label: "跳转",
    117           fixed: "left",
    118            "120",
    119           prop: "",
    120           isShow: true,
    121           align: "center",
    122           list: [{ id: "jump", name: "跳转", type: "", handleClick: this.jump }]
    123         },
    124         {
    125           id: "index",
    126           type: "index",
    127           label: "序列号",
    128           fixed: "left",
    129            "120",
    130           prop: "",
    131           isShow: true,
    132           align: "center"
    133         },
    134         {
    135           id: "date",
    136           type: "",
    137           label: "日期",
    138           fixed: "left",
    139            "150",
    140           prop: "date",
    141           isShow: true,
    142           align: "center"
    143         },
    144         {
    145           id: "name",
    146           type: "",
    147           label: "姓名",
    148           fixed: false,
    149            "120",
    150           prop: "name",
    151           isShow: true,
    152           align: "center"
    153         },
    154         {
    155           id: "province",
    156           type: "",
    157           label: "省份",
    158           fixed: false,
    159            "120",
    160           prop: "province",
    161           isShow: true,
    162           align: "center"
    163         },
    164         {
    165           id: "city",
    166           type: "",
    167           label: "市区",
    168           fixed: false,
    169            "120",
    170           prop: "city",
    171           isShow: true,
    172           align: "center"
    173         },
    174         {
    175           id: "address",
    176           type: "",
    177           label: "地址",
    178           fixed: false,
    179            "300",
    180           prop: "address",
    181           isShow: true,
    182           align: "center"
    183         },
    184         {
    185           id: "zip",
    186           type: "",
    187           label: "邮编",
    188           fixed: false,
    189            "120",
    190           prop: "zip",
    191           isShow: true,
    192           align: "center"
    193         }
    194       ],
    195       pagesizes: [1, 2, 3, 4],
    196       total: 10,
    197       pageSize: 1
    198          }
    199     },
    200     methods: {
    201       //text的跳转触发
    202     handleDelete(val) {
    203       console.log(val);
    204       this.StringUtil.getDecorator();
    205     },
    206     // checkbox的触发接收
    207     handleSelectionChange(val) {
    208       console.log(val);
    209       this.StringUtil.getDecorator();
    210     },
    211     // 点击tbody的行触发
    212     clickTable(val) {
    213       console.log(val);
    214       this.StringUtil.getDecorator();
    215     },
    216     //button的触发
    217     handleEdit(val) {
    218       console.log(val);
    219       this.StringUtil.getDecorator();
    220     },
    221     handleSizeChange(val) {
    222       console.log(val);
    223       this.total = 100;
    224       this.tableData = jsondata.tabledata;
    225       console.log(jsondata.tableData);
    226     },
    227     handleCurrentChange(val) {
    228       console.log(val);
    229       this.total = 200;
    230 
    231       this.tableData = jsondata.tabledata2;
    232     }
    233     }
    234 }
    235  </script>        

    在这里的table表格的封装,我是引入自己做的json数据来触发变化的,

    卑微前端,记录自己的项目封装的组件,方便以后自己用,如果有哪里不合理,请各路大神多多指教。

  • 相关阅读:
    携程的 Dubbo 之路
    应用上云新模式,Aliware 全家桶亮相杭州云栖大会
    重构:改善饿了么交易系统的设计思路
    Arthas 3.1.2 版本发布 | 增加 logger/heapdump/vmoption 命令
    如何检测 Web 服务请求丢失问题
    VPGAME的Kubernetes迁移实践
    Flink SQL 系列 | 5 个 TableEnvironment 我该用哪个?
    如何构建批流一体数据融合平台的一致性语义保证?
    Flink on YARN(下):常见问题与排查思路
    愚蠢的操作
  • 原文地址:https://www.cnblogs.com/xiaomanong-19/p/13163787.html
Copyright © 2020-2023  润新知