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

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

川长思鸟来 2021-12-16 12:07 1119阅读 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>
          <!-- 对应slot name -->
        </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
}