在Vue前端界⾯中，⼏种数据表格的展⽰处理，以及表格编辑录⼊处理操作。在Vue前端项⽬中，我这⾥主要是基于Vue+Element的开发，⼤多数情况下，我们利⽤Element的表格组件就可以满⾜⼤多数情况的要求，本篇随笔针对表格的展⽰和编辑处
理，综合性的介绍⼏款表格组件的展⽰和处理效果，其中包括Element的el-table组件，以及其他第三⽅类组件，如vue-easytable、vue-willtable，以及vxe-table，针对性的对⽐相关的差异。
1、el-table表格组件
这个是Element的表格组件，使⽤参考地址如下：
这个表格组件也是⾮常好⽤的展⽰数据的组件，提供了很多属性设置，表格列的模板定义可以进⾏各种各样的转义和处理，是我们使⽤Element组件经常⽤到的组件之⼀。
简单的界⾯效果如下所⽰。
它的简单界⾯代码如下所⽰，主要就是提供列的定义。
<template>
<el-table :data="tableData" stripe >
<el-table-column prop="date" label="⽇期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
⽽数据这是⼀个对象集合，⾥⾯对应各种属性记录，如下所⽰。
<script>
export default {
data() {
return {
tableData: [{
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>
不过⼀般实际使⽤的表格⽐这个会复杂很多，会在列之中提供很多转义信息展⽰，如下界⾯效果所⽰
或者
我们来看看表格头部和表格列的相关定义来进⾏解析。
<el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row
:header-cell- @selection-change="selectionChange"
@row-dblclick="rowDbclick" @sort-change="sortChange">
listLoading⽤来展⽰/隐藏加载中的状态
list则是提供给表格数据处理的数据源
selectionChange这是选中/取消勾选框的事件触发
rowDbclick是双击表格⾏出现的事件响应
sortChange是排序表头出现的事件处理
另外，表格数据往往涉及到分页信息，那么必须和分页控件⼀起使⽤
<!--分页部分 -->
<div class="block" >
<el-pagination :current-page="pageinfo.pageindex" :page-size="pageinfo.pagesize" :total="al"
:page-sizes="[10,20,30,40]" layout="total, sizes, prev, pager, next" @size-change="sizeChange"
@current-change="currentChange"/>
</div>
其中分页组件中涉及到pageinfo对象，包括当前页码和每页的数据记录数量，以及对每页数据⼤⼩变化事件sizeChange、页码变化的事件currentChange的处理。因此我们在<script>中定义相关的变量和⽅法。
export default {
components: {}, // 常见组件已经在main.js中挂载
data () {
return {
listLoading: false, // 列表加载状态
list: [], // 页⾯列表数据
pageinfo: {// 分页条件
pageindex: 1,
pagesize: 20,
total: 0
},
listSelection: [], // 选中记录
sorting: null, // 排序条件
获取数据的事件getlist中，我们主要就是根据条件获取数据记录，并赋值给list对象即可。
⽽其他相应的事件如下定义所⽰
search () { // 查询列表处理
this.pageinfo.pageindex = 1;// 重置为第⼀页
this.searchForm.pid = null;// 重置选择类型
},
resetSeachForm (formName) { // 重置查询条件处理
this.$refs[formName].resetFields();
this.search()
},
sortChange ({ column, prop, order }) {
var direction = (order === 'ascending') ? ' ASC' : ' DESC'
this.sorting = !this.isEmpty(prop) ? (prop + direction) : null
},
sizeChange (val) { // 页⾯⼤⼩变化处理
/
/ console.log(`每页 ${val} 条`);
this.pageinfo.pagesize = val;
},
currentChange (val) { // 页码变化处理htmlradio添加切换事件
// console.log(`当前页: ${val}`);
this.pageinfo.pageindex = val;
},
selectionChange (val) { // 选中记录
this.listSelection = val;
},
rowDbclick (row, column) { // 列表单击处理
var id = row.id
this.showView(id);
},
这样我们就是实现了对数据的分页处理，和相关的事件处理。剩下的就是对记录列内容的转义处理了，这个通过HTML的代码进⾏处理即可。
常规的内容处理如下所⽰。
<el-table-column align="center" label="名称" sortable="custom" prop="name" min-width="150">
<template slot-scope="scope">
{{ w.name }}
</template>
</el-table-column>
如果我们需要进⾏转义，在这⾥⾯处理判断就可以了，⾮常⽅便。
<el-table-column align="center" label="可见" sortable="custom" prop="visible" width="80">
<template slot-scope="scope">
<el-tag v-if="w.visible" type="success" effect="dark">可见</el-tag>
<el-tag v-else type="danger" effect="dark">隐藏</el-tag>
</template>
</el-table-column>
或者通过formater的函数进⾏内容的转义处理。
<el-table-column align="center" label="创建时间" width="160" sortable="custom" prop="createTime" :formatter="timeFormat"/>
也可以使⽤filter进⾏内容转义
<el-table-column align="center" label="商品类型" width="120" prop="ProductType">
<template slot-scope="scope">
<el-tag type="danger"> {{ w.ProductType | productTypeFilter }}</el-tag>
</template>
</el-table-column>
如果我们需要添加表格列的操作处理，那么添加对应的按钮即可，通过获取对应记录的标识，来进⾏相关记录的操作即可。
<!--表格⾏操作按钮 -->
<el-table-column align="center" label="操作" width="110">
<template scope="scope">
<el-row>
<el-button-group>
<el-tooltip effect="light" content="查看" placement="top-start">
<el-button icon="el-icon-search" type="success" circle size="mini"
@click="w.id)"/>
</el-tooltip>
<el-tooltip effect="light" content="编辑" placement="top-start">
<el-button icon="el-icon-edit" type="primary" circle size="mini" @click="w.id)"/>
</el-tooltip>
<el-tooltip effect="light" content="删除" placement="top-start">
<el-button icon="el-icon-delete" type="danger" circle size="mini"
@click="w.id)"/>
</el-tooltip>
</el-button-group>
</el-row>
</template>
</el-table-column>
Element的表格组件功能虽然很好，不过它的特点是展⽰处理，并不是很适合进⾏直接内容的编辑处理，有些⼈通过变量标识模板的⽅式控制编辑界⾯的展⽰，不过总体太复杂，不⽅便使⽤。
2、vue-easytable表格组件
vue-easytable表格组件地址：
npm安装：npm install vue-easytable -S
这个组件相对于Element的表格el-table来说，它的HTML代码⽐较少，适⽤于简单快捷的表格数据展⽰。
简单使⽤代码如下所⽰
<ve-table :columns="columns" :table-data="tableData"/>
⼀般它的使⽤代码如下所⽰（配合分页数据展⽰）
<ve-table row-key-field-name="id" :checkbox-option="checkboxOption" :columns="columns" :table-data="list"
:fixed-header="true" :border-around="true" :border-x="true" :border-y="true"/>
<!--分页部分 -->
<div class="block" >
<el-pagination :current-page="pageinfo.pageindex" :page-size="pageinfo.pagesize" :total="al"
:page-sizes="[10,20,30,40]" layout="total, sizes, prev, pager, next" @size-change="sizeChange"
@current-change="currentChange"/>
常见的界⾯效果如下所⽰
⼀般我们需要在JS中定义列的信息，它的类型可以是expand、checkbox、radio⼏种之⼀，默认是字符串⽅式。当前列类型： "expand"：⾏展开；"checkbox"：⾏多选；"radio"：⾏单选
columns: [// 表列定义
{
field: '',
key: 'a',
type: 'checkbox',
title: '',
width: 50,
align: 'center'
},
{
field: 'name',
key: 'name',
title: '姓名',
width: 120,
columnAlign: 'center'
},
这个列的定义除了field外，还需要⼀个Key的标识，不能为空，⼀般保留位field的值即可。
如果我们需要进⾏内容的转义处理，可以使⽤ renderBodyCell 函数进⾏转义处理，如下所⽰。
{
field: 'sex',
key: 'sex',
title: '性别',
width: 120,
columnAlign: 'center',
renderBodyCell: ({ row, column, rowIndex }, h) => {
const text = row[column.field];
// return <input value={text}></input>;
let html = null
if (text === '男') {
html = <el-tag type='primary'>{text}</el-tag>
} else {
html = <el-tag type='success'>{text}</el-tag>
}
return (
<div>
{html}
</div>
)
}
},
数据的处理，和我们前⾯介绍的类似，就是通过分页条件的⽅式进⾏查询分页，获得数据后赋值给对应列表即可。
// 获取列表，绑定到模型上，并修改分页数量
this.listLoading = true
testUser.GetAll(param).then(data => {
console.sult.items)
this.list = sult.items
al = alCount
this.listLoading = false
})
通过 row-key-field-name="id" :checkbox-option="checkboxOption" 代码的处理，可以实现选中记录的操作。
checkboxOption: {
// row select事件
selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
console.log(row, isSelected, selectedRowKeys);
},
// selected all事件
selectedAllChange: ({ isSelected, selectedRowKeys }) => {
console.log(isSelected, selectedRowKeys);
}
},
这个表格组件也主要是进⾏展⽰，没有直接编辑的处理操作，不过它的特点是快速展⽰数据，转义的话操作起来会费劲⼀些，它主要就是通过jsx的⽅式进⾏转义处理的，感觉没有在HTML上直接判断的快捷明了。
3、vue-willtable表格组件（可直接编辑）
以上两个表格组件，都没有涉及到编辑的操作，有时候我们在⼀些表格中希望给客户直接录⼊数据的场景。
如果采⽤el-table的⽅式来处理，⾮常不直观，也不易处理，因此引⼊第三⽅组件的⽅式来实现数据的直接录⼊就⽐较好了。
vue-willtable表格组件地址：
官⽅案例界⾯效果如下所⽰。
表格提供⽇期，数值、下拉列表，字符串等⼏种常见⽅式的录⼊。
总体上录⼊没有什么问题，不过对于组件的更新好像有时候有些问题，毕竟github上星星不是很多的项⽬。
我在这个基础上进⾏了案例的测试，界⾯效果如下所⽰。
主从表展⽰界⾯效果
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论