使用element-ui封装一个可编辑表格（扩展性极大）
使用element-ui封住一个可编辑表格
使用element-ui封装的，初学者适用，大神勿喷。。。直接上代码！！！！！！
先给你来个图片 样式可以自己调整，
使用方法（举例并加上注解）：
<!--
使用方法:
1.引入组件，
2. 组件写法：（注意，数据中的操作使用插槽弄进去的，不用也不用写这个==> <template slot-scope="scope" slot="btn">......）
注意点：需要用什么方法对表格进行操作，自己写 细节我就不写了
<EditTable :setting="setting"
:selectionChange="selectionChange"
:editPropData="editPropData">
<template slot-scope="scope"
slot="btn">
<el-button icon="el-icon-edit-outline"
type="text"
style="color:#00B998"
@click="edit(1,scope.row)">编辑</el-button>
<el-button type="text"
style="color:#FF5F55"
@click="del(2,scope.row)"
icon="el-icon-delete">删除</el-button>
</template>
</EditTable>
3.data中的数据
setting: {
//***************************边框，可拉长，建议使用***************************
border: true,
//***************是否使用index（序号）和selection（复选框），table的id***************************
header: {
index: true,
selection: true,
id: "sample-input-edit-table",
},
// **********************是否使用page分页****************************
page: { total: 15 },
//**************************1.type(必选，不需要编辑的使用text，下拉框使用select，时间使用date，使用操作使用btn)
2.filter:（字面意思，过滤，可选）可以写一个**方法（methods）**，效果不错，
3.fixed:（可选）定位
4.=========后面自己加，一些小的细节自己弄！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
setting: [
{ name: "条码号", prop: "barcode", width: 200, type: "text" },
{ name: "送检单位", prop: "inspectionUnit", type: "select", width: 250, options: [], filter: this.inspectionUnit_name },
{ name: "采样时间", prop: "samplingTime", type: "date", width: 250, filter: this.formatDate },
{ name: "病人姓名", prop: "patientName", type: "input" },
{
name: "性别",
prop: "gender",
type: "select",
filter: this.genderS,
options: [
{ label: "男", value: 1 },
{ label: "女", value: 0 },
],
},
{ name: "年龄", prop: "year", type: "input" },
{ name: "科室", prop: "department", type: "input" },
{ name: "医生", prop: "sendDoctor", type: "input" },
{ name: "门诊/住院号", prop: "opc", type: "input" },
{ name: "床号", prop: "bedNumber", type: "input" },
{ name: "临床诊断", prop: "clinicalDiagnosis", type: "input", width: 250 },
{ name: "检测套餐", prop: "packageNameList", width: 250, type: "select", options: [] },
{ name: "操作", width: 250, type: "btn", fixed: "right" },
],
// 存放数据的地方
data: [{ reason: 1111, merry: "212112" }],
},
4.给你一些附带的方法（methods）
inspectionUnit_name(val) {
},
formatDate(datePram) {
if (datePram) {
var date = new Date(datePram);
var YY = date.getFullYear() + "-";
var MM = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hh = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var mm = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return YY + MM + DD + " " + hh + mm + ss;
} else {
return "";
}
},
del(){
},
edit(){
},
// 选择table行数据
selectionChange(val) {
this.selection = val;
},
// 修改数据成功后=====
editPropData(row, prop) {
let params = {};
params.id = row.id;
下面自己项目中贴合实际弄！！！！！！！！！！！！！！！！！！！！！！！！！！！！！这个方法是编辑数据后的 很重要 必要的
// if (prop === "packageNameList") {
// params.detectionPackageVoList = [{ id: row[prop] }];
// } else {
// params[prop] = row[prop];
// }
// http("post", this.urlList.update, params).then((res) => {
// const { code, data } = res;
// if (code == 200) {
// this.search();
// Message.success("修改成功！");
// }
// });
},
-->
代码片
<template>
<div>
<el-table :data="setting.data"
ref="table"
:id="setting.header.id||'edit-table'"
class="table_height_set"
:row-class-name="tableRowClassName"
style="width: 100%"
:height="height"
stripe
:border="setting.border"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
@sort-change="sortChange"
:header-cell-style="{background:'#ebf7ff',color:'#30343F','font-size':'14px'}"
:cell-style="{color:'#30343F','font-size':'14px',height:'40px','line-height': '40px'}"
:row-style="{height:'40px','line-height': '40px'}"
@cell-click="tabClick">
<el-table-column type="selection"
align='center'
v-if="setting.header.selection"
fixed="left"
width="55">
</el-table-column>
<el-table-column width="55"
type="index"
v-if="setting.header.index"
align="center"
fixed="left"
label="序号">
</el-table-column>
<el-table-column v-for=" item in setting.setting"
:key="item.prop"
:prop="item.prop"
:fixed="item.fixed"
:label="item.name"
:width="item.width|| '130'"
align="center">
<template slot-scope="scope">
<div v-if="scope.row.index === tabClickIndex && tabClickLabel === item.name">
<div v-if="item.type=='input'"
class="propsItem">
<div class="item0 el-icon-close"
@click="blurCancel(scope.row,item.prop)"></div>
<el-input v-model="scope.row[item.prop]"
maxlength="300"
placeholder="请输入"
class="item1"
size="mini" />
<div class="item2 el-icon-check"
@click="inputBlur(scope.row,item.prop)"></div>
</div>
<div v-if="item.type==='select'"
class="propsItem">
<div class="item0 el-icon-close"
@click="blurCancel(scope.row,item.prop)"></div>
<el-select v-model="scope.row[item.prop]"
class="item1"
placeholder="请选择">
<el-option v-for="item in item.options||[]"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="item2 el-icon-check"
@click="inputBlur(scope.row,item.prop)"></div>
</div>
<div v-if="item.type==='date'"
class="propsItem">
<div class="item0 el-icon-close"
@click="blurCancel(scope.row,item.prop)"></div>
<el-date-picker v-model="scope.row[item.prop]"
class="item1"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="timestamp"
placeholder="选择日期时间">
</el-date-picker>
<!-- format="yyyy-MM-dd HH:mm:ss" -->
<div class="item2 el-icon-check"
@click="inputBlur(scope.row,item.prop)"></div>
</div>
<div v-if="item.type==='text'"
class="propsItem">
{{scope.row[item.prop]}}
</div>
</div>
<!-- v-if="tabClickIndex===null&& tabClickLabel === ''" -->
<span v-else>{{ item.filter?item.filter(scope.row[item.prop]):scope.row[item.prop]}}</span>
<slot name="btn"
v-if="item.type == 'btn'"
:row="scope.row">
</slot>
</template>
</el-table-column>
<!-- <el-table-column label="操作"
fixed="right"
width="250"
v-if="setting.slot.btn"
align="center"
>
<template slot-scope="scope">
</template>
</el-table-column> -->
</el-table>
<!-- 分页 -->
<div class="page-box"
v-if="setting.data.length != 0 && setting.page &&setting.page.total">
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.pageNumber"
:page-sizes="[10, 20, 30, 50]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="setting.page.total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabClickIndex: null, // 点击的单元格
tabClickLabel: "", // 当前点击的列名
defaltPropData: "", //修改时默认数据
page: {
pageSize: 10,
pageNumber: 1,
},
};
},
props: {
setting: {
type: Object,
require: true,
},
selectionChange: {
type: Function,
default: () => {},
},
editPropData: {
type: Function,
default: () => {},
},
sortChange: {
type: Function,
default: () => {},
},
rowClassName: {
type: Function,
default: () => {},
},
height: {
type: String,
default: "500",
},
pageChange: {
type: Function,
default: () => {},
},
},
methods: {
// ===========================================table方法==================================
tableRowClassName({ row, rowIndex }) {
// 把每一行的索引放进row
row.index = rowIndex;
// name名字
this.rowClassName({ row, rowIndex });
// 例子：如：
// if (row.samplePackageId && row.receivePackageId !== row.samplePackageId) {
// return "sample-confirm-err-row";
// }
},
// row 当前行 column 当前列
tabClick(row, column, cell, event) {
this.defaltPropData = row[column.property];
if (this.tabClickIndex !== null || column.type !== "default" || column.label === "操作") {
return;
}
// 如果其属性是text，则不能点击
let data = this.setting.setting.filter((item) => {
return item.prop === column.property;
});
if (data[0].type === "text") {
return;
}
this.tabClickIndex = row.index;
this.tabClickLabel = column.label;
},
blurCancel(row, prop) {
row[prop] = this.defaltPropData;
this.tabClickIndex = null;
this.tabClickLabel = "";
},
// 修改后
inputBlur(row, prop) {
// let params = {};
this.editPropData(row, prop);
this.tabClickIndex = null;
this.tabClickLabel = "";
},
//多选
handleSelectionChange(val) {
let len = val.length;
let arr = [];
for (var i = 0; i < len; i++) {
arr.push(val[i]["id"]);
}
this.selectionChange(arr);
},
// ****************************************************===============================================
// ************************分页组件方法*****************================================================
handleSizeChange(val) {
// pagesize
console.log(`每页 ${val} 条`);
this.page.pageSize = val;
this.page.pageNumber = 1;
// page组件发生改变后出发父组件的方法，并且把page的参数传递过去
this.pageChange(this.page);
this.$forceUpdate();
},
handleCurrentChange(val) {
this.$forceUpdate();
this.page.pageNumber = val;
this.pageChange({
pageSize: this.page.pageSize,
pageNumber: this.page.pageNumber,
});
},
},
watch: {
"page.pageNumber": {
handler(newVal) {
this.page.pageNumber = newVal;
},
deep: true,
},
"setting.data": {
handler(newVal) {
if (newVal.length == 0 && this.page.pageNumber != 1) {
this.page.pageNumber = Number(this.page.pageNumber) - 1;
this.pageChange(this.page);
}
},
deep: true,
},
},
};
</script>
<style lang="less" scoped>
.table_height_set {
.propsItem {
display: flex;
justify-content: center;
align-items: center;
.item0 {
margin-right: 10px;
width: 15px;
height: 15px;
border: 1px solid #ccc;
font-size: 14px;
font-weight: 600;
color: red;
}
.item1 {
width: 220px;
}
.item2 {
margin-left: 10px;
width: 15px;
height: 15px;
border: 1px solid #ccc;
font-size: 14px;
font-weight: 600;
color: green;
}
}
}
.page-box {
margin: 20px 0;
text-align: right;
}
</style>