2020-02-05

Posted 2021-03-12 t1314

Vue2.0封装ElementUI饿了吗的table组件

准备阶段

• npm 安装 vue-cli
• npm安装 element-ui

npm安装

安装vue-cli

 npm install --save-dev vue-cli

vue-cli初始化项目

vue init webpack

安装依赖包

npm install

子组件

由于vue2.0关于数据流的限制<防止数据流混乱，数据只能由上往下，事件从下往上触发>，子组件的数据不能直接传到父组件。

//MyTable.vue
<template>
<el-row>
    <el-row>
        <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%;text-align:center"
            :header-cell-style="headerStyle">
            <el-table-column
                v-for="(column, index) in columns"
                :prop="column.prop"
                :key="index"
                :label="column.label">
                <template slot-scope="scope">
                    <my-render v-if="column.render" :row="scope.row" :render="column.render"></my-render>
                    <span v-else>
                    {{scope.row[column.prop]}}
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <div class="block">
            <el-pagination
            :current-page="pageNum"
            :page-size="pageSize"
            @current-change="currentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage">
            </el-pagination>
        </div>
    </el-row>
</el-row>
</template>

<script>
import MyRender from "./MyRender";
export default {
  props: {
    tableData: Array,
    columns: Array,
    pageNum: { type: Number, default: 1 },
    pageSize: { type: Number, default: 10 },
    totalPage:{ type: Number, default:0}
  },
  methods: {
    headerStyle() {
      return { "text-align": "center" };
    },
    currentChange(val){
        this.$emit(‘currentChange‘,val)
    }
  },
  components: {
    MyRender
  }
};
</script>

<style>

</style>

其中使用了vue2.0的渲染函数，渲染函数组件如下

//MyRender.vue
<script>
export default {
  functional: true,
  props: {
    row: Object,
    render: Function
  },
  render: (h, ctx) => {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index
    };
    return ctx.props.render(h, params);
  }
};
</script>

其中包括下拉组件

//MyDropDown.vue
<template>
  <el-dropdown trigger="click" @command="handleCommand">
    <el-button type="primary">
      <span v-text="dropDownData.label"></span><i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="item.func" v-text="item.label" v-for="(item,index) in dropDownData.items" :key="index"></el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  export default {
    props: ["dropDownData"],
    methods: {
      handleCommand(command) {
        this.$emit(command.func, command.uuid);
      }
    }
  };
</script>

<style>

</style>

父组件

调用MyTable组件

<template>
    <my-table :tableData="tableData" :columns="columns" :totalPage="totalPage" @currentChange="currentChange"></my-table>
</template>
<script>
import MyTable from "base/MyTable";
export default {
    data(){
        return {
             columns: [
        { prop: "title", label: "标题" },
        { prop: "create_name", label: "发布人" },
        { prop: "item_name", label: "栏目" },
        { prop: "create_time", label: "创建时间" },
        { prop: "weight", label: "权重" },
        {
          prop: "isoriginal",
          label: "原创",
          render: function(h, param) {
            let html = "";
            if (param.row.isoriginal == "201") {
              html = "原创";
            } else {
              html = "非原创";
            }
            return html;
          }
        },
        {
          prop: "",
          label: "操作",
          render: (h, param) => {
            const dropDownData = {
              label: "操作",
              items: [
                { label: "修改", func: { func: "update", uuid: param.row.uuid } },
                { label: "删除", func: { func: "del", uuid: param.row.uuid } }
              ]
            };
            // 触发MyDropDown的update和del事件
            return h(MyDropDown, {
              props: { dropDownData: dropDownData },
              on: { update: this.update, del: this.del }
            });
          }
        }
      ]
        }
    }
}
</script>