87,907
社区成员
发帖
与我相关
我的任务
分享iview+table+select+mysql整合问题
效果图如下：
有三个数据数组：data1[],data2[],data3[]
data1假设是从mysql查询出来的表格数据数组，显示到table中
data2是table中账号状态的选择器select的数据数组
data3是table中员工状态的选择器select的数据数组
需求：
table加载时，初始数据为data1数组的。data2和data3不显示，当我点击选择器的时候，把选中的值更新到数据库；
目前遇到的问题是：
table加载时，data2和data3的数据会覆盖data1中该列的值；
vue代码如下：
有三个数据数组：data1[],data2[],data3[]
data1假设是从mysql查询出来的表格数据数组，显示到table中
data2是table中账号状态的选择器select的数据数组
data3是table中员工状态的选择器select的数据数组
需求：
table加载时，初始数据为data1数组的。data2和data3不显示，当我点击选择器的时候，把选中的值更新到数据库；
目前遇到的问题是：
table加载时，data2和data3的数据会覆盖data1中该列的值；
vue代码如下：
<script>
export default {
data () {
return {
selecteds: [],
columns4: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '工号',
key: 'Jnumber',
width: 150,
align: 'center'
},
{
title: '姓名',
key: 'Ename',
width: 150,
align: 'center'
},
{
title: '密码',
key: 'password',
width: 150,
align: 'center'
},
{
title: '账号状态',
key: 'Astatus',
width: 200,
render: (h, params) => {
var data = this.data2;
return h('div', [
h(
"Select",{
props:{
value:'one'
}
},
data.map(function (item) {
if (item.value !== 'three') {
return [h(
"Option",
{
props: {
value: item.value,
key: item.value
}
},item.label)]
}
else {
return h('Dropdown', {props: {trigger: "hover",placement: 'right-start'}},
[
h('DropdownItem',[
item.label,
h('Icon',
{
props: {
type: "ios-arrow-forward"
}
})
]) ,
h('DropdownMenu',{
slot:"list"
},
item.children.map(function (child) {
console.log(child)
return h('Option', {
props: {
value: child.value,
key: child.value
}
}, child.label)
})
)
])
}
})
)]);
}
},
{
title: '员工状态',
key: 'Estatus',
width: 200,
render: (h, params) => {
var data = this.data3;
return h('div', [
h(
"Select",{
props:{
value:'one'
}
},
data.map(function (item) {
return [h(
"Option",
{
props: {
value: item.value,
key: item.value
}
},item.label)]
})
)]);
}
},
{
title: '备注',
key: 'remarks',
width: 150,
align: 'center'
}
],
data1: [
{
Jnumber: '123456',
Ename: '张三',
password: '123456',
Astatus: '数据不显示',
Estatus: '数据不显示',
remarks: '2019-10-23'
},
{
Jnumber: '123456',
Ename: '张三',
password: '123456',
Astatus: '数据不显示',
Estatus: '数据不显示',
remarks: '2019-10-23'
},
{
Jnumber: '123456',
Ename: '张三',
password: '123456',
Astatus: '数据不显示',
Estatus: '数据不显示',
remarks: '2019-10-23'
},
{
Jnumber: '123456',
Ename: '张三',
password: '123456',
Astatus: '数据不显示',
Estatus: '数据不显示',
remarks: '2019-10-23'
},
{
Jnumber: '123456',
Ename: '张三',
password: '123456',
Astatus: '数据不显示',
Estatus: '数据不显示',
remarks: '2019-10-23'
},
{
Jnumber: '123456',
Ename: '张三',
password: '123456',
Astatus: '数据不显示',
Estatus: '数据不显示',
remarks: '2019-10-23'
},
{
Jnumber: '123456',
Ename: '张三',
password: '123456',
Astatus: '数据不显示',
Estatus: '数据不显示',
remarks: '2019-10-23'
}
],
data2: [
{
value: "one",
label: "正常",
children: []
},
{
value: "three",
label: "其他",
children: [
{
value: "divideOne",
label: "一份3斤"
},
{
value: "divideTwo",
label: "两份各1.5斤"
}
]
},
{
value: "five",
label: "异常"
}
],
data3: [
{
value: "one",
label: "在职",
children: []
},
{
value: "five",
label: "离职"
}
]
}
},
methods: {
handleSelectAll (status) {
// this.$refs.selection.selectAll(status);
// console.log(this.$refs.selection.$children)
this.$refs.selection.selectAll(status);
console.log(this.selection)
},
rowClassName :function (row, index) {
if(index%2==0){
return 'ivu-table-stripe-even';
}
else return 'ivu-table-stripe-odd';
},
onSelect(selection,index){
// console.log(this.$refs.selection.data)
this.selecteds = selection;
console.log(this.selecteds)
}
}
}
</script>
...全文
请发表友善的回复…
发表回复
