我有一个可以过滤的表格。在将单位从公制切换为英制之前，它的工作原理非常好。进行此切换之后，过滤器仍在寻找默认的度量标准编号。我希望它可以同时过滤公制和英制。
http://jsfiddle.net/bghouse/eywraw8t/285690/
要复制的动作。 -在OD最小值上输入10 -在最大外径上输入12 -将公制更改为英制 -您会发现它不能与新的英制数字开关一起使用。
var vm = new Vue({
el: '#app',
data: {
isActive: false,
currentSort: 'pn',
currentSortDir: 'asc',
filter_unit: 'metric',
filter_category: '',
filter_search: '',
filter_od_min: '',
filter_od_max: '',
filter_id_min: '',
filter_id_max: '',
filter_thickness_min: '',
filter_thickness_max: '',
filter_lo_min: '',
filter_lo_max: '',
filter_force_min: '',
filter_force_max: '',
columns: [
{ label: 'P/N', shortcode: 'pn' },
{ label: 'OD (De,mm)', shortcode: 'od' },
{ label: 'ID (De,mm)', shortcode: 'id' },
{ label: 'Thickness (De,mm)', shortcode: 'thickness' },
{ label: 'LO', shortcode: 'lo' },
{ label: 'Spring Force @ 75%', shortcode: 'force' },
], // columns
products: [
{pn:170001,od:8,od_imperial:0.31,id:3.2,id_imperial:0.13,thickness:0.3,thickness_imperial:0.01,lo:0.55,force:104.3,category:"stainless",},{pn:170002,od:8,od_imperial:0.31,id:3.2,id_imperial:0.13,thickness:0.4,thickness_imperial:0.02,lo:0.6,force:185.5,category:"chrome-vanadium",},{pn:170003,od:8,od_imperial:0.31,id:3.2,id_imperial:0.13,thickness:0.5,thickness_imperial:0.02,lo:0.7,force:357.4,category:"chrome-vanadium",},{pn:170004,od:8,od_imperial:0.31,id:4.2,id_imperial:0.17,thickness:0.2,thickness_imperial:0.01,lo:0.45,force:39.2,category:"chrome-vanadium",},{pn:170005,od:8,od_imperial:0.31,id:4.2,id_imperial:0.17,thickness:0.3,thickness_imperial:0.01,lo:0.55,force:117.9,category:"chrome-vanadium",},{pn:170006,od:8,od_imperial:0.31,id:4.2,id_imperial:0.17,thickness:0.4,thickness_imperial:0.02,lo:0.6,force:209.5,category:"chrome-vanadium",},{pn:170007,od:10,od_imperial:0.39,id:3.2,id_imperial:0.13,thickness:0.3,thickness_imperial:0.01,lo:0.65,force:98.3,category:"chrome-vanadium",},{pn:170008,od:10,od_imperial:0.39,id:3.2,id_imperial:0.13,thickness:0.4,thickness_imperial:0.02,lo:0.7,force:179.1,category:"chrome-vanadium",},{pn:170009,od:10,od_imperial:0.39,id:3.2,id_imperial:0.13,thickness:0.5,thickness_imperial:0.02,lo:0.85,force:404,category:"chrome-vanadium",},{pn:170010,od:10,od_imperial:0.39,id:4.2,id_imperial:0.17,thickness:0.4,thickness_imperial:0.02,lo:0.7,force:189.1,category:"chrome-vanadium",},{pn:170011,od:10,od_imperial:0.39,id:4.2,id_imperial:0.17,thickness:0.5,thickness_imperial:0.02,lo:0.75,force:294,category:"chrome-vanadium",},{pn:170012,od:10,od_imperial:0.39,id:4.2,id_imperial:0.17,thickness:0.6,thickness_imperial:0.02,lo:0.85,force:502.3,category:"chrome-vanadium",},{pn:170013,od:10,od_imperial:0.39,id:5.2,id_imperial:0.2,thickness:0.25,thickness_imperial:0.01,lo:0.55,force:57.5,category:"chrome-vanadium",},{pn:170014,od:10,od_imperial:0.39,id:5.2,id_imperial:0.2,thickness:0.4,thickness_imperial:0.02,lo:0.7,force:209.3,category:"chrome-vanadium",},{pn:170015,od:10,od_imperial:0.39,id:5.2,id_imperial:0.2,thickness:0.5,thickness_imperial:0.02,lo:0.75,force:325.3,category:"chrome-vanadium",},{pn:170016,od:12,od_imperial:0.47,id:4.2,id_imperial:0.17,thickness:0.4,thickness_imperial:0.02,lo:0.8,force:178.3,category:"chrome-vanadium",},{pn:170017,od:12,od_imperial:0.47,id:4.2,id_imperial:0.17,thickness:0.5,thickness_imperial:0.02,lo:0.9,force:331.4,category:"chrome-vanadium",},{pn:170018,od:12,od_imperial:0.47,id:4.2,id_imperial:0.17,thickness:0.6,thickness_imperial:0.02,lo:1,force:556.8,category:"chrome-vanadium",},{pn:170019,od:12,od_imperial:0.47,id:5.2,id_imperial:0.2,thickness:0.5,thickness_imperial:0.02,lo:0.9,force:349.6,category:"chrome-vanadium",},{pn:170020,od:12,od_imperial:0.47,id:5.2,id_imperial:0.2,thickness:0.6,thickness_imperial:0.02,lo:0.95,force:506.1,category:"chrome-vanadium",},{pn:170021,od:12,od_imperial:0.47,id:6.2,id_imperial:0.24,thickness:0.5,thickness_imperial:0.02,lo:0.85,force:326.4,category:"chrome-vanadium",},{pn:170022,od:12,od_imperial:0.47,id:6.2,id_imperial:0.24,thickness:0.6,thickness_imperial:0.02,lo:0.95,force:551.7,category:"chrome-vanadium",},{pn:170032,od:15,od_imperial:0.59,id:5.2,id_imperial:0.2,thickness:0.7,thickness_imperial:0.03,lo:1.25,force:796.5,category:"chrome-vanadium",},{pn:170033,od:15,od_imperial:0.59,id:6.2,id_imperial:0.24,thickness:0.5,thickness_imperial:0.02,lo:1,force:289.4,category:"chrome-vanadium",},{pn:170034,od:15,od_imperial:0.59,id:6.2,id_imperial:0.24,thickness:0.6,thickness_imperial:0.02,lo:1.05,force:423.5,category:"chrome-vanadium",},{pn:170035,od:15,od_imperial:0.59,id:6.2,id_imperial:0.24,thickness:0.7,thickness_imperial:0.03,lo:1.1,force:577.5,category:"chrome-vanadium",},{pn:170036,od:15,od_imperial:0.59,id:8.2,id_imperial:0.32,thickness:0.7,thickness_imperial:0.03,lo:1.1,force:665.6,category:"chrome-vanadium",},{pn:170037,od:15,od_imperial:0.59,id:8.2,id_imperial:0.32,thickness:0.8,thickness_imperial:0.03,lo:1.2,force:982.3,category:"chrome-vanadium",},{pn:170038,od:16,od_imperial:0.63,id:8.2,id_imperial:0.32,thickness:0.4,thickness_imperial:0.02,lo:0.9,force:154.3,category:"chrome-vanadium",},{pn:170039,od:16,od_imperial:0.63,id:8.2,id_imperial:0.32,thickness:0.6,thickness_imperial:0.02,lo:1.05,force:410,category:"chrome-vanadium",},{pn:170040,od:16,od_imperial:0.63,id:8.2,id_imperial:0.32,thickness:0.9,thickness_imperial:0.04,lo:1.25,force:1013,category:"chrome-vanadium",},{pn:170041,od:18,od_imperial:0.71,id:6.2,id_imperial:0.24,thickness:0.4,thickness_imperial:0.02,lo:1,force:138.6,category:"chrome-vanadium",},{pn:170042,od:18,od_imperial:0.71,id:6.2,id_imperial:0.24,thickness:0.5,thickness_imperial:0.02,lo:1.1,force:245.4,category:"chrome-vanadium",},{pn:170043,od:18,od_imperial:0.71,id:6.2,id_imperial:0.24,thickness:0.6,thickness_imperial:0.02,lo:1.2,force:400.3,category:"chrome-vanadium",},{pn:170044,od:18,od_imperial:0.71,id:6.2,id_imperial:0.24,thickness:0.7,thickness_imperial:0.03,lo:1.4,force:741.7,category:"stainless",},{pn:170045,od:18,od_imperial:0.71,id:6.2,id_imperial:0.24,thickness:0.8,thickness_imperial:0.03,lo:1.5,force:1072,category:"stainless",},{pn:170046,od:18,od_imperial:0.71,id:8.2,id_imperial:0.32,thickness:0.7,thickness_imperial:0.03,lo:1.25,force:596,category:"chrome-vanadium",},{pn:170047,od:18,od_imperial:0.71,id:8.2,id_imperial:0.32,thickness:0.8,thickness_imperial:0.03,lo:1.3,force:782.6,category:"chrome-vanadium",},{pn:170048,od:18,od_imperial:0.71,id:8.2,id_imperial:0.32,thickness:1,thickness_imperial:0.04,lo:1.5,force:1497,category:"chrome-vanadium",},{pn:170049,od:18,od_imperial:0.71,id:9.2,id_imperial:0.36,thickness:0.45,thickness_imperial:0.02,lo:1.05,force:213.7,category:"chrome-vanadium",},{pn:170050,od:18,od_imperial:0.71,id:9.2,id_imperial:0.36,thickness:0.7,thickness_imperial:0.03,lo:1.2,force:566.4,category:"chrome-vanadium",},{pn:170051,od:18,od_imperial:0.71,id:9.2,id_imperial:0.36,thickness:1,thickness_imperial:0.04,lo:1.4,force:1254,category:"chrome-vanadium",},{pn:170052,od:20,od_imperial:0.79,id:8.2,id_imperial:0.32,thickness:0.5,thickness_imperial:0.02,lo:1.15,force:230.8,category:"chrome-vanadium",},{pn:170053,od:20,od_imperial:0.79,id:8.2,id_imperial:0.32,thickness:0.6,thickness_imperial:0.02,lo:1.3,force:412,category:"chrome-vanadium",},{pn:190280,od:125,od_imperial:4.92,id:71,id_imperial:2.8,thickness:8,thickness_imperial:0.31,lo:10.4,force:85494,category:"stainless",}, ], // products
},
filters: {
calc1(val, type) {
if (type === 'metric') {
return val;
} else if (type === 'imperial') {
var calc = val * 0.0393701;
return Math.round(calc * 100)/100
}// if
},// calc
calc2(val, type) {
if (type === 'metric') {
return val;
} else if (type === 'imperial') {
var calc = val * 0.22480894244319;
return Math.round(calc * 100)/100;
}// if
},// calc
},
computed: {
showProducts(){
return this.products
.filter(a => {
// filter pn column with search input
return (a.pn + '').includes(this.filter_search);
})
.filter(a => {
// filter category with the select menu
return (a.category + '').includes(this.filter_category);
})
.filter(a => {
// make a duplicate because editing orginal will update the input field for users
var od_max_duplicate = this.filter_od_max;
// if theres no max, default it to 1000(any high number) so all products show up
if(this.filter_od_max == ''){ od_max_duplicate = 1000; }
// filter min and max values with OD column
return a.od >= this.filter_od_min && a.od <= od_max_duplicate;
})
.filter(a => {
// make a duplicate because editing orginal will update the input field for users
var id_max_duplicate = this.filter_id_max;
// if theres no max, default it to 1000(any high number) so all products show up
if(this.filter_id_max == ''){ id_max_duplicate = 1000; }
// filter min and max values with id column
return a.id >= this.filter_id_min && a.id <= id_max_duplicate;
})
.filter(a => {
// make a duplicate because editing orginal will update the input field for users
var thickness_max_duplicate = this.filter_thickness_max;
// if theres no max, default it to 1000(any high number) so all products show up
if(this.filter_thickness_max == ''){ thickness_max_duplicate = 1000; }
// filter min and max values with thickness column
return a.thickness >= this.filter_thickness_min && a.thickness <= thickness_max_duplicate;
})
.filter(a => {
// make a duplicate because editing orginal will update the input field for users
var lo_max_duplicate = this.filter_lo_max;
// if theres no max, default it to 1000(any high number) so all products show up
if(this.filter_lo_max == ''){ lo_max_duplicate = 1000; }
// filter min and max values with lo column
return a.lo >= this.filter_lo_min && a.lo <= lo_max_duplicate;
})
.filter(a => {
// make a duplicate because editing orginal will update the input field for users
var force_max_duplicate = this.filter_force_max;
// if theres no max, default it to 1000(any high number) so all products show up
if(this.filter_force_max == ''){ force_max_duplicate = 1000000; }
// filter min and max values with weight column
return a.force >= this.filter_force_min && a.force <= force_max_duplicate;
})
.sort((a, b) => {
if (this.currentSortDir === 'asc') {
//console.log( this.currentSort );
//return a[this.currentSort] >= b[this.currentSort];
return a[this.currentSort] >= b[this.currentSort] ? 1 : a[this.currentSort] <= b[this.currentSort] ? -1 : 0;
}
//return a[this.currentSort] <= b[this.currentSort];
return a[this.currentSort] <= b[this.currentSort] ? 1 : a[this.currentSort] >= b[this.currentSort] ? -1 : 0;
})
},
filteredProducts() {
let filteredProducts = [];
let _product;
//console.log( filteredProducts );
this.showProducts.forEach(product => {
_product = product;
// do the logic here
if (this.filter_unit === 'metric') {
this.columns[1].label = "OD(De,mm)";
this.columns[2].label = "ID(De,mm)";
this.columns[3].label = "Thickness(De,mm)";
this.columns[5].label = "Spring Force @ 75%(N)";
//_product.od = product.od
} else if (this.filter_unit === 'imperial') {
this.columns[1].label = "OD(De,in)";
this.columns[2].label = "ID(De,in)";
this.columns[3].label = "Thickness(De,in)";
this.columns[5].label = "Spring Force @ 75%(lbs)";
}
filteredProducts.push(_product)
})
return filteredProducts
}, // filtered products
},
methods: {
sortBy:function(col) {
// if you click the same label twice
if(this.currentSort == col){
// sort by asc
this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
}else{
this.currentSort = col;
}
}, // sort
}, // methods
}); // vue