HTML表格搜索和选中数据,elementUI+vue表格组件（支持多选、分页、选中回显、搜索、增删改）...

功能

本组件能实现表格多选，分页，分页选中回显，新建、删除、修改、查询。

写在前，有问题欢迎问，有更好的建议欢迎留言~~~

使用时要注意将后台接口的情况，根据情况修改代码。

但是！！！！

不要只做复制粘贴，报错了就来乱喷的喷子

如果对你有帮助，希望你给我喜欢 ！收藏！git上点星星！哈哈哈哈或哈哈哈哈(不要脸了)

实现效果

1.png

2.png

3.png

思路要点

将组件的操作产生的参数全部返回父组件，由父组件处理接口数据的交互

这样就可以提高表格组件的多样性，提高耦合程度，和高复用性，不必因为接口处理方式不同而重新编写组件。

比如点击确定按钮请求接口，不同的功能会调用不同接口地址，如果将接口请求都放入组件内，那么下次复用的时候就会改组件的代码。如果是多人维护，那大大增加的出bug的风险。

废话不多说，上代码

父组件

模板代码，主要是用tableData传输数据，其他@方法来接收参数

:tableData="tableData" @Search="Search"

@editline="editline" @deleteline="deleteline"

@pageChange="pageChange" @createInfor="createInfor">

引入组件

import checkboxTable from '@/components/common/checkboxTable'

数据结构和引用组件

components: {

checkboxTable

//引用组件

},

data: () => ({

//向table传值

tableData: {

//是否显示组件

isShow: true,

//是否显示新建弹框

dialogTableVisible: false,

//表格行项目列表和总条目数

lineItems: {

items: [],

totalCount: 0,

},

//表格头部信息

table: {

header: {},

},

//存放搜索的key数组

search: [],

//分页器

fenye: {

pageIndex: 1,

pageSize: 10,

},

},

}),

将接收的数据进行处理，然后传入表格组件

//处理表格数据

dealTableData(obj) {

//赋值列表

this.tableData.lineItems = obj;

//创建表头名称

this.tableData.table.header = {

"name": "姓名", "sex": "性别", "age": "年龄",

};

//搜索条件的key

this.tableData.search = [

{name: "姓名", id: "name", value: ""},

{name: "年龄", id: "age", value: ""}];

},

接收表格组件参数的示例函数，具体情况要根据后台接口来写

//新建条目

createInfor(details) {

this.$post("新建接口", details, {

emulateJSON: true

}).then((response) => {

if (response.code === 'success') {

this.$message({message: '创建成功', type: 'success'});

//请求成功后将弹窗关闭

this.tableData.dialogTableVisible = false;

//重新请求列表接口，刷新数据

this.getTableData();

} else {

this.$message({message: '创建失败', type: 'warning'});

}

}, err => {

console.log(err);

});

},

//请求基础表格数据

getTableData(msg) {

this.$post("表格列表接口", {

"page": this.tableData.fenye.pageIndex,

"rows": this.tableData.fenye.pageSize

}).then((response) => {

console.log(response)

if (response.code === 'success') {

this.$message({message: response.msg, type: 'success'});

//将数据传入处理函数

this.dealTableData(response.data)

return

} else {

this.$message({message: response.msg, type: 'warning'});

}

}, err => {

console.log(err);

});

},

表格组件

没啥说的，代码注释里边都有。

哦，有一点要说

分页页码回显的时候，有时候不会重新渲染，所以要在分页器上加个v-if强制重新渲染

uuid这个插件，视项目情况引用

{{item.name}}

@keyup.enter.native="Search()">

查询

新建

批量删除

ref="singleTable" border

:row-key="getRowKeys"

stripe

:height=(this.$store.state.bodyHeight-150)

:reserve-selection="true"

:data="tableData.lineItems.items"

@selection-change="handleCurrentChange"

style="width: 100%">

v-for="(value, key) in tableData.table.header"

:key="value">

{{scope.row[key]}}

修改

删除

@current-change="pageChange" v-if="tableData.isShow"

:current-page="tableData.pageIndex"

:page-size=tableData.fenye.pageSize

layout="total, prev, pager, next, jumper"

:total=tableData.lineItems.totalCount>

:rules="[

{ required: true, message: '姓名不能为空',trigger: 'blur' },

]">

:rules="[

{ required: true, message: '请选择性别',trigger: 'change' },

]">

:rules="[

{ required: true, message: '年龄不能为空'},

{ type: 'number', message: '年龄必须为数字值'}

]">

取 消

确 定

//生成uuid唯一标识，可以不引用

import UUID from 'node-uuid';

export default {

//接收父组件传来的数据

props: {

tableData: Object,

},

data() {

return {

//控制label的宽度

formLabelWidth: '80px',

//记录是修改还是新建

type: "",

form: {

//唯一标识

uuid: "",

name: '',

sex: '',

age: '',

},

// 获取row的key值

getRowKeys(row) {

return row.uuid;

},

//存放分页选中条目,回显用

selectedData: [],

//存放选中条目，做传参用

templateRadio: [],

}

},

mounted() {

},

methods: {

//确定选中

handleCurrentChange(rows) {

console.log(rows);

//将选中赋值到回显和传参数组

this.templateRadio = rows;

this.selectedData = [];

if (rows) {

rows.forEach(row => {

if (row) {

this.selectedData.push(row.uuid);

}

});

}

},

//表头自适应

labelHeadFit(h, {column, index}) {

let l = column.label.length

let f = 16 //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，

column.minWidth = f * l //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度

//然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全

return h('div', {class: 'table-head', style: {width: '100%'}}, [column.label])

},

//行项目分页

pageChange(val) {

//将页码传回父组件

this.$emit("pageChange", val);

},

//新建行项目

createInfor() {

//生成uuid

this.form.uuid = UUID.v1();

//打开新建弹窗

this.tableData.dialogTableVisible = true;

//标识为新建

this.type = "createInfor"

},

//修改行项目

editline(details) {

//赋值详情做展示用

this.form = details

this.tableData.dialogTableVisible = true;

//标识为修改

this.type = "editline"

},

//删除有行项目

deleteline(details) {

this.$emit("deleteline", details);

},

//批量删除

batchDelete(){

this.$emit("batchDelete", this.templateRadio);

},

//查询

Search() {

//将查询的value传回

this.$emit("Search",this.tableData.search);

},

//提交时统一分发

submit(formName) {

console.log(formName, this.form)

this.$refs[formName].validate((valid) => {

if (valid) {

switch (this.type) {

//修改行项目

case "editline":

this.$emit("editline", this.form);

break;

//创建行项目

case "createInfor":

this.$emit("createInfor", this.form);

break;

}

} else {

console.log('error submit!!');

return false;

}

});

}

}

}