elementui提取table表格封装组件，elementui提取table表格单列展示按钮的展示效果

川长思鸟来 2021-12-16 12:07 1033阅读 0赞

后台管理系统中用到了非常多的表格，一般为了方便都会讲表格进行提取，形成公共组件。  
提取表格时会遇到返回的json数据中要对单个字段进行处理，如时间戳转换，状态转换等  
以及elementUI表格提取后每个页面都展示或者不展示当列按钮的方法

**封装的表格组件代码**

<template>
      <div>
        
        <el-table
          :data="tableData"
          highlight-current-row
          border
          @selection-change="handleSelectionChange"
          @current-change="handtable"
        >
          <el-table-column type="selection" width="50" align="center" v-if="gg?true:false"></el-table-column>
          <el-table-column label="序号" type="index" width="50" align="center" :index="indexMethod"></el-table-column>
          <el-table-column
            v-for="(itemtest, index) in title"
            :key="index"
            v-if="!itemtest.operate"
            :prop="itemtest.prop"
            align="center"
            :label="itemtest.label"
            :formatter="itemtest.formatter"
          ></el-table-column>
          <el-table-column v-else :label="itemtest.label" :prop="itemtest.prop" align="center">
            <template slot-scope="scope">
              <slot :name="itemtest.prop" :$index="scope.$index" :row="scope.row"></slot>
              
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <script>
    export default {
      name: "tabletable",
      props: {
        title: {
          type: Array,
          default: []
        },
        tableData: {
          type: Array,
          default: []
        },
        gg:Boolean,
        formatter: { default: {} },  //此处写上formatter函数
        handleSelectionChange: { default: {} },
        handtable: { default: {} },
        indexMethod: { default: {} },
       
      },
      methods: {
      }
    };
    </script>

调用封装的表格代码

<template>
      <div>
    
        
        <v-Table
          :tableData="tableData"
          :title="title"
          :gg="false"
          :indexMethod="indexMethod"
          :handleClick="handleClick"
          :handtable="handtable"
        >
              <template slot="dealScreenshot" slot-scope="scope">  // slot="dealScreenshot" 要与下列的表格一致
            <el-button size="small" type="text" @click="handleRowEdit(scope.$index,scope.row)">查看</el-button>
          </template>
        </v-Table>
      </div>
    </template>
    <script>
    import vTable from "@/components/comiview/table.vue";
    import { formDatetime } from "@/utils/formdata.js";  //封装的js方法
    import { orderState } from "@/utils/orderState.js";//封装的js方法
    export default {
      components: {
        vTable
      },
      name: "account",
      data() {
        return {
          tableData: [
            {
              orderCode: "1",
              payStatus: "1",
              createTime: "",
            }
          ],
          title: [
            { label: "用户名", prop: "orderCode",  operate: false },
            {
              label: "账户状态",
              prop: "payStatus",
                operate: false,
              //状态格式转换
              formatter: (value, column) => {     //写上formatter函数
                let payStatus = orderState(value, column);  //这里可以调用写好的函数也可以直接处理数据
                return payStatus;
              }
            },
            {
              label: "注册时间",
              prop: "createTime",
                operate: false,
              //时间格式转换
              formatter: (value, column) => {
                let time = formDatetime(value, column);
                return time;
              },
            },
             {
              prop: "dealScreenshot",   //要与上面预留的slot位置一致
              label: "收款凭证",
              operate: true,
            }
          ]
        };
      },
      watch: {},
      created() {
       
      },
      methods: {
        indexMethod(index) {
          //设置序列号
          return (
            (Number(this.formInline.startNo) - 1) *
              Number(this.formInline.pageSize) +
            index +
            1
          );
        },
        handleClick(val) {},
    
    
      }
    };
    </script>

**封装的js方法**

// 13位时间戳转字符串
    
    import moment from "moment";
    
    function formDatetime(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
    
    function formDa(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    }
    
    
    
    export {
      formDatetime,
      formDa
      
    }

elementui提取table表格使用formatter方法，并增加单列展示按钮的展示效果，展示和不展示按钮的页面展示方法  
![在这里插入图片描述][20190706174949693.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ_size_16_color_FFFFFF_t_70]

[20190706174949693.png]: /images/20211214/f78ca4216cc347cb8c730e4bb87a4814.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ_size_16_color_FFFFFF_t_70]: /images/20211214/79ce0a781ef74859aa52be0bd281d69d.png