继上一篇文章,加了新需求,要求有搜索功能。
上一篇点击查看:vue实现表格的添加,删除,修改,使用了element-ui
- 有兴趣的可以复制看看,依然是vue-cli3脚手架。有时间详述。
<template>
<div class = "width_100 height_100" style="padding:50px 20px">
<div class = "width_100 height_80">
<el-row>
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
<el-col :span="24">
<el-table size="mini" :data="tables" border style="width: 100%" highlight-current-row>
<el-table-column type="index"></el-table-column>
<el-table-column v-for="(item,index) in master_user.columns" :label="item.label" :prop="item.prop" :width="item.width" :key = "index">
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[item.prop]">
</el-input>
</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="">
<template slot-scope="scope">
<span v-if="scope.row.isSet" class="el-tag el-tag--success el-tag--small" style="cursor: pointer;" @click.stop="saveRow(scope.row,scope.$index)">
保存
</span>
<span v-else class="el-tag el-tag--primary el-tag--small" style="cursor: pointer;" @click="editRow(scope.row,scope.$index)">
编辑
</span>
<span class="el-tag el-tag--danger el-tag--small" style="cursor: pointer;" @click="deleteRow(scope.$index,master_user.data)">
删除
</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="24">
<div class="el-table-add-row" style="width: 99.2%;" @click="add()"><span>+ 添加</span></div>
</el-col>
</el-row>
<span style="color:#fff">{{master_user.data}}</span>
</div>
</div>
</template>
<script>
export default {
search: '',
name: '',
data() {
return {
search:"",
master_user: {
sel: null, //选中行
columns: [{
prop: "deviceType",
label: "设备类型",
width: 120
},
{
prop: "parentCode",
label: "父设备编码",
width: 150
},
{
prop: "parentName",
label: "父设备名称",
width: 120
},
{
prop: "deviceName",
label: "设备类别名称",
width: 220
},
{
prop: "locationName",
label: "位置名称"
},
{
prop: "managementName",
label: "管理部门名称"
},
{
prop: "usetName",
label: "使用部门名称"
},{
prop:"specification",
label:"规格"
},{
prop:"model",
label:"型号"
},{
prop:"uspData",
label:"投用日期"
}, {
prop:"originalValue",
label:"原值"
}
],
data: [{
"deviceType": "1",
"parentCode": "2",
"parentName": "3",
"deviceName": "4",
"locationName": "5",
"managementName": "6",
"usetName": "7",
"specification": "8",
"model": "9",
"uspData": "10",
"originalValue": "11",
"isSet": false, } ],
},
}
},
methods: {
add() {
for (let i of this.master_user.data) {
if (i.isSet) return this.$message.warning("请先保存当前编辑项");
}
let j = {
"deviceType": "",
"parentCode": "",
"parentName": "",
"deviceName": "",
"locationName": "",
"managementName": "",
"usetName": "",
"specification": "",
"model": "",
"uspData": "",
"originalValue": "",
"isSet": true, };
this.master_user.data.push(j);
this.master_user.sel = JSON.parse(JSON.stringify(j));
},
saveRow(row, index) { //保存
var flag = true
for (let i in this.master_user.sel){
if(!this.master_user.sel[i]){
flag = false
console.log('123',false)
}
}
if(flag){//判断是否全部填写
let data = JSON.parse(JSON.stringify(this.master_user.sel));
for (let k in data) row[k] = data[k];
this.$message({
type: 'success',
message: "保存成功!"
});
row.isSet = false;//点击保存后该为false值,隐藏保存按钮,显示编辑按钮
}else{
this.$message({
type:'warning',
message: "请全部填写"
})
}
},
editRow(row) { //编辑
for (let i of this.master_user.data) {
if (i.isSet) return this.$message.warning("请先保存当前编辑项");
}
this.master_user.sel = row
row.isSet = true//点击保存后该为false值,隐藏编辑按钮,显示保存按钮
},
deleteRow(index, rows) { //删除
this.$message({
type:'type',
message:"删除成功!"
})
rows.splice(index, 1)
}
},
computed: {
// 模糊搜索
tables () {
const search = this.search
if (search) {
// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意: filter() 不会对空数组进行检测。
// 注意: filter() 不会改变原始数组。
return this.master_user.data.filter(data => {
// some() 方法用于检测数组中的元素是否满足指定条件;
// some() 方法会依次执行数组的每个元素:
// 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测;
// 如果没有满足条件的元素,则返回false。
// 注意: some() 不会对空数组进行检测。
// 注意: some() 不会改变原始数组。
return Object.keys(data).some(key => {
// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置,如果没有找到就返回-1;
// 该方法对大小写敏感!所以之前需要toLowerCase()方法将所有查询到内容变为小写。
return String(data[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.master_user.data
}
},
}
</script>
<style>
.el-table-add-row {
margin-top: 10px;
width: 100%;
height: 34px;
border: 1px dashed #c1c1cd;
border-radius: 3px;
cursor: pointer;
justify-content: center;
display: flex;
line-height: 34px;
color:#fff;
}
</style>