<template>
<card :filter="false">
<template #header>
<el-button type="primary" icon="el-icon-search" @click="inactiveFn">启用状态</el-button>
<el-button type="primary" icon="el-icon-search" @click="namesFn">所有职称</el-button>
<el-button type="primary" icon="el-icon-search" @click="idsFn">键值对id</el-button>
<el-button type="primary" icon="el-icon-search" @click="strprofessnameFn">1006的职称</el-button>
<el-button type="primary" icon="el-icon-search" @click="strprofessnameOneFn">第一个1006的职称</el-button>
<el-button type="primary" icon="el-icon-search" @click="isHaveFn">是否存在1009</el-button>
</template>
<el-table
ref="table"
:header-cell-style="{background:'#F5F4F7'}"
:data="tableData"
border
fit
stripe
highlight-current-row
style=" 100%;"
>
<el-table-column
type="index"
width="60"
label="序号"
align="center"
/>
<el-table-column
prop="strprofesscode"
label="职称编码"
width="180"
/>
<el-table-column
prop="strprofessname"
label="职称名称"
width="180"
/>
<el-table-column
prop="strprofess"
label="上级"
width="180"
/>
<el-table-column
prop="blnisdetail"
label="是否末级"
align="center"
width="100"
>
<template v-slot="scope">
{{ scope.row.blnisdetail|isDetail }}
</template>
</el-table-column>
<el-table-column
prop="strnote"
label="备注"
min-width="180"
/>
<el-table-column
prop="blnisinactive"
label="状态"
align="center"
width="100"
>
<template v-slot="scope">
{{ scope.row.blnisinactive|State }}
</template>
</el-table-column>
</el-table>
所有职称:{{ names }}
<br>
键值对id:{{ ids }}
<br>
1006的职称:{{ strprofessname }}
<br>
第一个1006的职称:{{ strprofessnameOne.strprofessname }}
<br>
是否存在1009:{{ code1009 }}
</card>
</template>
<script>
import { res } from './data.js'
export default {
name: 'TableArea',
data() {
return {
res: res,
tableData: [],
names: [],
ids: [],
strprofessname: [],
strprofessnameOne: [],
code1009: ''
}
},
created() {
this.tableData = this.res.data.rows
},
methods: {
// filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。filter()返回的是数组，数组内是所有满足条件的元素，而find()只返回第一个满足条件的元素。如果条件不满足，filter()返回的是一个空数组，而find()返回的是undefined
// const myArr=[1,2,3,4,5,6];
// var v=myArr.find(value=>value>4);
// console.log(v);// 5
// 1.filter用法：过滤状态为'启用'的数据
inactiveFn() {
this.tableData = this.tableData.filter(item => {
return item.blnisinactive === 0
// 过滤编码大于'1007'的信息
// return item.strprofesscode * 1 > 1007
})
},
// 2.map用法：返回所有的职称,不许重复
namesFn() {
this.names = this.tableData.map(item => {
return item.strprofessname
})
this.names = this._.uniq(this.names)
},
// 3.map用法：返回所有键值对id
idsFn() {
this.ids = this.tableData.map(item => {
return { lngprofessid: item.lngprofessid }
})
},
// 4.forEach用法：找到编码为'1006'职称,---注意 filter,some,find,map 结果一样
strprofessnameFn() {
this.tableData.forEach(item => {
if (item.strprofesscode === '1006') {
this.strprofessname.push(item.strprofessname) // 正厅级 院长
// this.strprofessname = item.strprofessname// 显示的是最后一个
}
})
},
// 5.找到第一个编码为'1006'职称 filter过滤出所有,find找到第一个
strprofessnameOneFn() {
this.strprofessnameOne = this.tableData.find(item => {
return item.strprofesscode === '1006'
})
},
// 6.some用法：一个true则为true,every用法：所有true才为true
// 做判断用，是否存在编码1009 some：返回true,every:返回false
isHaveFn() {
this.code1009 = this.tableData.some(item => {
return item.strprofesscode === '1009'
})
}
// some用法：
// let arr = [1,2,3,4];
// let res = arr.some(item => item > 4)
// console.log(res); // false
// every用法：
// let arr = [1,2,3,4];
// let res = arr.every(item => item > 0)
// console.log(res); // true
}
}
</script>