vue项目中将element-ui table表格写成组件

Z时代
2024-01-10
分类：综合

vue

　　表格中我们经常需要动态加载数据，如果有多个页面都需要用到表格，那我希望可以有个组件，只传数据过去显示，不用每个页面都去写这么一段内容：

 1 <el-table :data="tableData"  border size="mini" fit highlight-current-row height="500">
 2     <el-table-column type="index" align="center" fixed></el-table-column>
 3     <el-table-column prop="DHM" min-width="140px" label="时间" align="center"></el-table-column>
 4     <el-table-column prop="PLAZANO" min-width="100px" label="编码" align="center"></el-table-column>
 5     <el-table-column prop="PLAZANAME"  min-width="100px" label="名称" align="center"></el-table-column>
 6     <el-table-column prop="CAR_PLATE" label="号码" align="center"></el-table-column>
 7     <el-table-column prop="CARD_NO" min-width="120px" label="卡号" align="center"></el-table-column>
 8     <el-table-column prop="DATATYPE" label="数据类型" align="center" :formatter="formatDATATYPE"></el-table-column>
 9     <el-table-column prop="STAFFNAME" min-width="100px" label="姓名" align="center"></el-table-column>
10     <el-table-column prop="MEDIATYPE" label="付款方式" align="center"></el-table-column>
11     <el-table-column prop="COMP_CASH" label="计算费额" align="center"></el-table-column>
12     <el-table-column prop="FACT_CASH" label="实收费额" align="center"></el-table-column>
13     <el-table-column label="操作" min-width="140px" align="center">
14        <template slot-scope="scope">
15           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
16           <el-button type="text" size="small">编辑</el-button>
17        </template>
18     </el-table-column>
19 </el-table>

　　上面这段代码是一个element-ui中tabele表格的形式，这里表头都是已经固定的，如果每个页面都写上这么一段，不同的是表头名字和字段，这样子就有点重复，而且页面的篇幅也就比较大了，于是把这块写成一个组件，每个页面引入这个组件，再传入数据。

　　1. 表格组件：

首先 table.vue 组件可以这样写：

 1 <el-table :data="tableData"  border size="mini" fit highlight-current-row height="500" :row-style="rowStyle" @row-dblclick="rowDblclick"
 2       v-loading="loading"
 3       element-loading-text="拼命加载中"
 4       element-loading-spinner="el-icon-loading"
 5       element-loading-background="rgba(0, 0, 0, 0.3)">
 6       <el-table-column type="index" align="center" fixed></el-table-column>
 7       <!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), oper: 是否有操作列
 8            oper.name: 操作列字段名称, oper.clickFun: 操作列点击事件, formatData: 格式化内容 -->
 9       <el-table-column v-for="(th, key) in tableHeader"
10         :key="key"
11         :prop="th.prop"
12         :label="th.label"
13         :fixed="th.fixed"
14         :min-width="th.minWidth" align="center">
15           <!-- 加入template主要是有操作一栏， 操作一栏的内容是相同的， 数据不是动态获取的，不过我这里操作一栏的名字定死了（oper表示是操作这一列，否则就不是） -->
16           <template slot-scope="scope">
17             <div v-if="th.oper">
18               <el-button v-for="(o, key) in th.oper" :key="key" @click="o.clickFun(scope.row)" type="text" size="small">{{o.name}}</el-button>
19             </div>
20             <div v-else>
21               <span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
22               <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
23             </div>
24           </template>
25       </el-table-column>
26 </el-table>

// 这里是传入的数据 

 1　props: {
 2     tableData: {
 3       type: Array,
 4       default: function () {
 5         return []
 6       }
 7     },
 8     rowDblclick: {
 9       type: Function,
10       default: (row, event, column) => { console.log(\'default: \' + row + \'---\' + event + \'---\' + column) }
11     },
12     tableHeader: {
13       type: Array,
14       default: function () {
15         return []
16       }
17     },
18     loading: {
19       type: Boolean,
20       default: false
21     }
22   },

然后在其他组件中就可以引入table组件，将数据传给table显示

1 <table :tableData="tableData" :rowDblclick="rowDblclick" :tableHeader="tableHeader" :loading="loading"></table>

　其中 tableData是表格中要显示的数据内容，这个内容我的是从后台查询出来的， rowDblclick 是双击一行做的操作，如果不需要可以删除， tableHeader 是表头显示的数据， loading 是表格加载的loading方式，默认是没有的

　　表头数据格式如下： formatData 是表格里面的数据需要做处理的方法， oper是操作列，查看和编辑是两个按钮，handleClick和editClick点击按钮的方法，自行补充。

 1 export const tableHeader = [ // 表头数据
 2   { prop: \'dhm\', label: \'时间\', minWidth: \'140px\' },
 3   { prop: \'plazano\', label: \'编码\', minWidth: \'100px\' },
 4   { prop: \'plazano\', label: \'名称\', minWidth: \'100px\', formatData: val => store.getters.allPlazano2Map.get(val) },
 5   { prop: \'car_plate\', label: \'号码\' },
 6   { prop: \'card_no\', label: \'卡号\', minWidth: "120px" },
 7   { prop: \'laneno\', label: \'数据类型\', formatData: function(val) { return val.substr(2, 1) == \'1\' ? \'出口\' : \'入口\' } },
 8   { prop: \'staffname\', label: \'姓名\', minWidth: \'100px\' },
 9   { prop: \'mediatype\', label: \'付款方式\' },
10   { prop: \'comp_cash\', label: \'计算费额\' },
11   { prop: \'fact_cash\', label: \'实收费额\' },
12   { prop: \'oper\', label: \'操作\', fixed: \'right\', minWidth: \'140px\',
13     oper: [
14       { name: \'查看\', clickFun: handleClick },
15       { name: \'编辑\', clickFun: editClick }
16     ]
17   }
18 ]

　　现在的代码可能会报错，下面这处的代码是在全局注册了一个过滤器，如果不注册就找不到这个方法就会报错，所以还需要注册一个全局过滤器，如果你不需要对数据做处理可以不要这个过滤器

　　2. 注册全局过滤器，我的是这样写的，先新建个文件 filter.js 然后在里面写个方法， export 出去

export function formatters(val, format) {
   if (typeof (format) === \'function\') {
     return format(val)
   } else return val
}

　　然后再在main.js中引入进来注册全局的过滤器：

import * as filters from \'./filters\'
Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
})

　　这个在每个页面就都可以使用 formatters 这个过滤器方法了，不过具体的过滤方法是由 format 这个参数传进去的，这里主要是因为不同的数据过滤的方法不一样，所以在表头传数据的时候就一并写上处理数据的方法

　　如果很多地方都使用了同一个方法，可以将这个方法注册成全局方法，那么在每个页面就可以直接使用该方法，不用重复去写。

　　3. 注册全局方法

　　建立个js 文件（我的文件名为validate.js），写入该方法，这里使用 exports.install 注册全局方法，挂载到vue原型上

exports.install = (Vue, options) => {
  Vue.prototype.validator = {
    lanenoTransf(val) { return val.substr(2, 1) == \'1\' ? \'出口\' : \'入口\' }
  }
}

　　然后在main.js中引入

import validator from \'@/utils/validate\'
Vue.use(validator)

　　最后页面上就可以直接使用

{ prop: \'laneno\', label: \'数据类型\', formatData: this.lanenoTransf },

最最后，看我的表格：

以上是 vue项目中将element-ui table表格写成组件的全部内容，来源链接： utcz.com/z/380983.html

vue项目中将element-ui table表格写成组件

其他人也看了：