网上看到的，太丑陋了new Function可以参考参考：
var aa = "{name:'cola',item:[{age:11},{age:22},{age:23},{age:23}]}"; var now = new Date().getTime(); for (var i = 0; i < 100000; i++) { var a = eval("(" + aa + ")"); } var now1 = new Date().getTime(); document.write("eval 时间为：" + (now1 - now) + "<br/>"); var now2 = new Date().getTime(); for (var i = 0; i < 100000; i++) { var fn = new Function("return" + aa); fn(); } var now3 = new Date().getTime(); document.write("new Function时间为：" + (now3 - now2) + "<br/>"); //经过测试结果 FF效果如下 //eval 时间为：979 //new Function时间为：1372 //经过测试结果 IE8效果如下 //eval 时间为：913 //new Function时间为：1037 //经过测试结果 Chrome效果如下 //eval 时间为：211 //new Function时间为：251 //经过测试结果 Opera //eval 时间为：384 //new Function时间为：1024
项目中写的代码：
<template>
<div class="app-container calendar-list-container">
<div class="filter-container">
<el-select class="filter-item" v-model="paramsName" placeholder="分类">
<el-option v-for="item in colConfigs[colMap]" :key="item.prop" :label="item.label" :value="item.prop">
</el-option>
</el-select>
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="关键字" v-model="paramsValue"> </el-input>
<el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" v-if="true||btn_add" @click="handleCreate" type="primary" icon="edit">添加</el-button>
</div>
<el-table :data="list" v-loading.body="listLoading" height=420 border fit highlight-current-row style="width: 100%;">
<el-table-column align="center" width="180"
v-for="{ prop, label } in colConfigs[colMap]"
:key="prop"
:prop="prop"
:label="label">
</el-table-column>
<el-table-column fixed="right" align="center" label="操作" width="360">
<template slot-scope="scope">
<el-button v-if="colMap!==colOptions[2]" type="primary" size="small" @click="clickNext(scope.row)">{{ colCN[colMap].next }}</el-button>
<el-button v-if="colMap!==colOptions[0]" type="primary" size="small" @click="clickPrev()">上一步</el-button>
<el-button v-if="true||btn_edit" type="success" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button v-if="true||btn_del" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
</div>
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form :model="eval(colMap+'Form')" :rules="rules" ref="form" label-width="200px" size="mini">
<el-form-item v-for="({ prop, label },index) in colConfigs[colMap]" :label="label" prop="prop" :key="prop">
<el-input :model="eval(colMap+'Form['+prop+']')" :disabled="(dialogStatus=='create')?(index<colConfigs[colMap].length-2):(index<colConfigs[colMap].length-1)" :placeholder="'请输入'+label"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel('form')">取 消</el-button>
<el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
<el-button v-else type="primary" @click="update('form')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
/* eslint-disable */
import {
regionList, cityList, districtList,
addRegion, addCity, addDistrict,
getRegion, getcity, getDistrict,
delRegion, delCity, delDistrict,
putRegion, putCity, putDistrict } from '@/api/admin/region/index';
import { mapGetters } from 'vuex';
export default {
name: 'region',
data() {
return {
regionForm: { regionCode: '', regionName: '' },
cityForm: { regionCode: '', cityCode: '', cityName: '' },
districtForm: { regionCode: '', cityCode: '', districtCode: '', districtName: '' },
colMap: '',
colOptions: ['Region', 'City', 'District'],
colCN: { region: { next: '城市' }, city: { next: '区/县' } },
colConfigs: {
region: [
{ prop: 'regionCode', label: '省编码' },
{ prop: 'regionName', label: '省名称' }
],
city: [
{ prop: 'regionCode', label: '省编码' },
{ prop: 'cityCode', label: '城市编码' },
{ prop: 'cityName', label: '城市名称' }
],
district: [
{ prop: 'regionCode', label: '省编码' },
{ prop: 'cityCode', label: '城市编码' },
{ prop: 'districtCode', label: '区/县编码' },
{ prop: 'districtName', label: '区/县名称' }
]
},
rules: {
},
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 20,
regionCode: '',
cityCode: ''
},
rowRegionCode: '',
rowCityCode: '',
dialogFormVisible: false,
dialogStatus: '',
btn_edit: false,
btn_del: false,
btn_add: false,
paramsValue: undefined,
paramsName: undefined,
inputText: true,
textMap: {
update: '编辑',
create: '创建'
}
};
},
created() {
this.colMap = this.colOptions[0];
this.getList();
this.btn_edit = this.elements['regionManager:btn_edit'];
this.btn_del = this.elements['regionManager:btn_del'];
this.btn_add = this.elements['regionManager:btn_add'];
},
computed: {
...mapGetters(['elements'])
},
methods: {
clickNext(row) {
eval('this.colMap = ' + (this.colMap === this.colOptions[0]) ? this.colOptions[1] : this.colOptions[2]);
eval('this.row' + this.colMap + 'Code = row.' + this.colMap + 'Code');
this.resetQueryParams();
this.getList();
},
clickPrev() {
eval('this.colMap = ' + (this.colMap === this.colOptions[1]) ? this.colOptions[0] : this.colOptions[1]);
eval('this.row' + this.colMap + 'Code = \'\'');
this.resetQueryParams();
this.getList();
},
getList() {
this.resetListQuery();
this.listLoading = true;
switch (this.colMap) {
case this.colOptions[0]:
regionList(this.listQuery).then(response => {
this.list = response;
this.total = response.length;
this.listLoading = false;
});
break;
case this.colOptions[1]:
cityList(this.listQuery).then(response => {
this.list = response;
this.total = response.length;
this.listLoading = false;
});
break;
case this.colOptions[2]:
districtList(this.listQuery).then(response => {
this.list = response;
this.total = response.length;
this.listLoading = false;
});
break;
}
},
handleFilter() {
this.getList();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
},
handleCreate() {
this.resetTemp();
this.dialogStatus = 'create';
this.dialogFormVisible = true;
},
handleUpdate(row) {
this.resetTemp();
let getObj = eval("get"+this.colMap);
let rowId = eval("row."+ this.colMap.toLowerCase() +"Code");
getObj(rowId).then(response => {
this.form = response.data;
this.dialogFormVisible = true;
this.dialogStatus = 'update';
});
},
handleDelete(row) {
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let delObj = eval("del"+this.colMap);
let rowId = eval("row."+ this.colMap.toLowerCase() +"Code");
delObj(rowId).then(() => {
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
});
const index = this.list.indexOf(row);
this.list.splice(index, 1);
});
});
},
create(formName) {
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
let addObj = eval("add"+this.colMap);
let addForm = eval("this."+ this.colMap.toLowerCase() +"Form");
addObj(addForm).then(() => {
this.dialogFormVisible = false;
this.getList();
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
});
});
} else {
return false;
}
});
},
cancel(formName) {
this.dialogFormVisible = false;
const set = this.$refs;
set[formName].resetFields();
},
update(formName) {
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
this.dialogFormVisible = false;
this.form.password = undefined;
let putObj = eval("put"+this.colMap);
let objId = eval("this."+this.colMap.toLowerCase()+"Form."+this.colMap.toLowerCase()+"Code");
let objForm = eval("this."+this.colMap.toLowerCase()+"Form");
putObj(objId, objForm).then(() => {
this.dialogFormVisible = false;
this.getList();
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
});
});
} else {
return false;
}
});
},
resetTemp() {
switch (this.colMap) {
case this.colOptions[0]:
this.regionForm = { regionCode: '', regionName: '' };
break;
case this.colOptions[1]:
this.cityForm = { regionCode: this.rowRegionCode, cityCode: '', cityName: '' };
break;
case this.colOptions[2]:
this.districtForm = { regionCode: this.rowRegionCode, cityCode: this.rowCityCode, districtCode: '', districtName: '' };
break;
}
},
resetListQuery() {
this.listQuery = {
page: 1,
limit: 20,
regionCode: this.rowRegionCode,
cityCode: this.rowCityCode
}
this.listQuery[this.paramsName] = this.paramsValue;
},
resetQueryParams() {
this.paramsName = '';
this.paramsValue = '';
}
}
};
</script>
附上赵偶像和阮偶像的连接
http://www.ruanyifeng.com/blog/2017/02/fp-tutorial.html
http://blog.zhaojie.me/2012/08/js-code-from-eval-benchmark.html