关于vue.js:Vue自定义表格组件测试版

Vue自定义表格组件

思考到最近在应用element框架开发治理后盾，用到表格组件的次数比拟多，简略做了一个数据展现型的表格组件，至于交互按钮下面还没有通过验证。
<br/>

表格列提供4种数据处理展现，文本（默认）、图片、匹配文本、匹配文本按钮,做一下解释。

1.<Table>组件代码

<template>  <div class="w-match m-t-1">    <!-- 表格 -->    <el-table      :data="dataList"      border      fit      highlight-current-row>      <el-table-column        label="序号"        width="70"        align="center">        <template slot-scope="scope">          {{ (page - 1) * limit + scope.$index + 1 }}        </template>      </el-table-column>      <el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :key="item.prop">        <template slot-scope="scope">            <span v-if="!item.permission && item.options">              {{ item.options[scope.row[item.prop]]['title'] || scope.row[item.prop] }}            </span>          <img v-else-if="item.showImage" :src="scope.row[item.prop]" :style="item.style" class="w-match" alt="">          <el-button :type="item.options[scope.row[item.prop]].type"                     size="mini" icon="el-icon-edit"                     v-else-if="item.permission && item.onAction"                     @click="item.onAction(scope.row)">            {{ item.options[scope.row[item.prop]].title }}          </el-button>          <span v-else>{{ scope.row[item.prop] || '' }}</span>        </template>      </el-table-column>      <el-table-column label="操作" align="center" width="200" v-if="actions && actions.length>0">        <template slot-scope="scope">          <div class="" v-for="item in actions" :key="item.name">            <el-button :type="item.type" :size="item.size||'mini'"                       @click="item.onAction(scope.row)"                       v-if="item.permission != undefined ? item.permission : true">{{ item.title }}            </el-button>          </div>          <!--            <el-button type="danger" size="mini" @click="removeDataById(scope.row.id)"-->          <!--                       v-if="hasPerm('activity.delete')">删除-->          <!--            </el-button>-->        </template>      </el-table-column>    </el-table>    <!-- 分页 -->    <el-pagination      :current-page="page"      :page-size="limit"      :total="total"      style="padding: 30px 0; text-align: center;"      layout="total, sizes, prev, pager, next, jumper"      @current-change="getList"      :page-sizes="[10, 20, 30, 40, 50, 100]"      @size-change="handleSizeChange"    />  </div></template><script>export default {  name: "TableComponent",  props: {    dataList: {      //数据源      type: Array,      default: [],      required: true    },    total: {      //页大小      type: Number,      default: 0    },    columns: {      //表格列      type: Array,      default: [],      required: true    },    actions: {      //表格按钮      type: Array,      default: [],      required: true    },    onPageChange: {      type: Function,      default: null    }  },  data() {    return {      page: 1,      limit: 10,    }  },  created() {    this.getList()  },  methods: {    getList(page = 1) {      this.page = page      this.$emit("onPageChange", this.page, this.limit);//通知父组件页码发生变化    },    handleSizeChange(number) {      this.limit = number      this.$emit("onPageChange", this.page, this.limit);//通知父组件页大小发生变化    },  }}</script><style scoped></style>

<br/>

2.页面援用形式

<template>  <div class="app-container">    <!--查问表单-->    <el-form :inline="true" class="demo-form-inline">      <el-form-item prop="status">        <el-select v-model="dataQuery.status" clearable>          <el-option label="上架" :value="1"></el-option>          <el-option label="下架" :value="0"></el-option>        </el-select>      </el-form-item>      <el-button type="primary" icon="el-icon-search" @click="queryList()">查问</el-button>      <el-button type="default" @click="resetData()">重置</el-button>    </el-form>    <div class="w-match m-t-1">      <Table        ref="table"        :columns="tableColumn"        :actions="tableAction"        :data-list="list"        :total="total"        @onPageChange="getList"/>    </div>  </div></template><script>import api from '@/api'import Table from '@/components/Table/index'export default {  name: "Page",  components: {    Table  },  data() {    return {      list: [],      total: 0,      page: 1,      limit: 10,      dataQuery: {},      tableColumn: [        {prop: "createTime", label: "创立工夫"},        {prop: "mobile", label: "手机号"},        {prop: "memberTime", label: "会员时效"},        {prop: "redeemTime", label: "兑换工夫"},        {          prop: "status", label: "是否兑换", width: 60,          options: {1: {title: '是', type: 'success'}, 0: {title: '否', type: 'warning'}},          //待验证性能          // onAction:updateByStatus(row,rowIndex)          // permission:hasPerm('gift.status')        },      ],      tableAction: [        //待验证性能        // {        //   title: '编辑', type: 'primary',        //   // permission: this.hasPerm('gift.update'),        //   onAction:(data)=>{console.log(data)}        // }      ]    }  },  watch: {    $route(to, from) {      //路由变动形式，路由发生变化，办法就会执行      this.getList()    },  },  created() {    this.getList()  },  methods: {    getList(page, limit) {      if (page) this.page = page      if (limit) this.limit = limit      //数据申请接口      api.getList(this.dataQuery)        .then(response => {          //数据申请胜利解决          this.total = response.total          this.list = response.data        })    },    queryList() {      this.$refs.table.getList()//重置表格为第一页    },    resetData() {      this.dataQuery = {}      this.$refs.table.getList()//重置表格为第一页    },  }}</script>