唠唠叨叨
今儿就不唠叨了。（心虚x
介绍
eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。其实我要使用它的场景是在我需要将列表中每列的column字段的值获取到，
再进行一些数据处理。but要是我有五百列数据，总不能在页面写五百个column的字段吧，所以就想着使用它来动态地取用列表的column字段。
但是！！！！！
查阅相关资料发现，在MDN文档中规定了eval()的使用非常危险，尤其是要开放上线的项目中，容易受到攻击。因此我使用了function获取。
过程
有个业务场景是，你需要批量获取对象数组中的数值进行一个固定的操作（比如赋值或者判断），这个时候如果你一个个来写代码就会很长很多，所以就想到了eval函数来使用，它可以实现将传入的字符串当做 JavaScript 代码进行执行。 eval（） 1.执行2+2算式
console.log(eval('2 + 2'));
// Expected output: 4
2.输出作为‘2+2’算式的字符串
console.log(eval(new String('2 + 2')));
// Expected output: 2 + 2
3.执行判断：2+2是否恒等于4？
console.log(eval('2 + 2') === eval('4'));
// Expected output: true
4.执行判断：2+2是否恒等于字符串‘2+2’
console.log(eval('2 + 2') === eval(new String('2 + 2')));
// Expected output: false
5.获取子代属性
var obj = { a: 20, b: 30 };
var propName = getPropName(); // 返回 "a" 或 "b"
eval("var result = obj." + propsName);
但是eval（）并不安全，因此咱们用对应的方法来替换 function 1.执行2+2算式 咱们直接写2+2就行了……
console.log(2 + 2);
// Expected output: 4
2.输出作为‘2+2’算式的字符串 也是一样直接写只不过加引号
console.log('2+2');
// Expected output: 2 + 2
3.执行判断：2+2是否恒等于4？
console.log(2 + 2 === 4);
// Expected output: true
4.执行判断：2+2是否恒等于字符串‘2+2’
console.log(2 + 2 === '2 + 2')
// Expected output: false
5.获取子代属性 这个就可以用咱们的方法了
var obj = { a: 20, b: 30 };
var propName = getPropName(); // 返回 "a" 或 "b"
obj[propName];
使用的完整代码
由上可以在我们需要批量处理多个变量的时候，我们就能用方案五了，以下代码就是使用的一个例子，判断表格的表头名。
<template>
<el-table
:data="state.data
:cell-class-name="cellStyle"
>
<template v-for="(col, index) in state.cols" :key="index">
<el-table-column header-align="center" :label="col.label" :prop="col.prop" :align="col.align"
show-overflow-tooltip></el-table-column>
</template>
</el-table>
</template>
<script setup>
import { reactive,getCurrentInstance, onMounted } from 'vue';
import { Chart } from '@antv/g2';
const state = reactive({
data: [], //表数据
cols: [], //表头
hightList: [], //匹配的高亮列名，由接口获取或者自定义
})
const cellStyle = ({row, column, rowIndex, columnIndex}) => {
let a = state.hightWords.indexOf(column.property)
var obj = row //
for (let i = 0; i <= state.hightList[a].length; i++) {
switch (rowIndex){
case state.hightList[a][i] :
if (props.editState) {
return 'red-background'
} else if (!obj[column.property]) { //使用obj[ "a" ] 与 obj.a 等价
return 'red-background'
}else{
return 'red-table'
}
break;
}
}
}
defineExpose({ // 向父组件暴露调用方法
})
onMounted(() => { //挂载初始化方法
})
</script>
<style lang="scss">
.red-table{
color: #f00;
text-decoration: underline wavy red;
}
.red-background{
background-color: #ffcdcd !important;
}
</style>
