element-ui 封装 表格

一、封装表格组件

javascript 复制代码
<template>
  <el-table :data="list" :default-sort="{ prop: 'date' }" style="width: 100%">
    <template v-for="item in tableColumn">
      <el-table-column
        v-if="item.filters"
        :prop="item.prop"
        :label="item.label"
        :sortable="item.sortable"
        :filters="item.filters"
        :filter-method="filterHandler(item.filterMethod)"
      />
      <el-table-column
        v-if="!item.filters"
        :prop="item.prop"
        :label="item.label"
        :sortable="item.sortable"
      />
    </template>
  </el-table>
</template>

<script scoped>
export default {
  data() {
    return {
      list: [],
      tableColumn: [],
    };
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
    column: {
      type: Array,
      default: [],
    },
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length) {
          this.list = JSON.parse(JSON.stringify(val));
        }
      },
    },
    column: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length) {
          this.tableColumn = JSON.parse(JSON.stringify(val));
        }
      },
    },
  },
  methods: {
    // 如果没传,那么默认等值判断
    filterHandler(filterMethod) {
      if (filterMethod) {
        return item.filterMethod;
      } else {
        return (value, row, column) => {
          const property = column["property"];
          return row[property] === value;
        };
      }
    },
  },
};
</script>

二、使用方法

javascript 复制代码
<template>
  <div id="app"><Tabel :data="data" :column="column" /></div>
</template>

<script>
import Tabel from "@/components/Tabel.vue";
export default {
  components: { Tabel },
  data() {
    return {
      column: [
        {
          label: "日期",
          prop: "date",
          sortable: true,
        },
        {
          label: "姓名",
          prop: "name",
          filters: [{ text: "王小龙", value: "王小龙" }],
        },
        {
          label: "地址",
          prop: "address",
        },
      ],
      data: [
        {
          date: "2016-05-02",
          name: "王小猪",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小龙",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小海",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>
相关推荐
我命由我123451 天前
Word - Word 的 5 种视图(页面视图、阅读视图、Web 版式视图、大纲视图、草稿视图)
ui·word·excel·photoshop·表格·ps·美工
我命由我123451 天前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工
fury_1231 天前
vue3:触发自动el-input输入框焦点
javascript·vue.js·elementui
小菜全1 天前
ElementUI 组件概览
前端·vue.js·elementui
今天不要写bug2 天前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
前端 贾公子3 天前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐3 天前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
赵得C3 天前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
小菜全3 天前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
浩星3 天前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui