vue.js 使用v-for 循坏的多个table 如何去区分
在项目中遇到这样一个问题,同一个页面上有多个table,这多个table是使用v-for循环出来的,每个table中都有一个颜色变色器,修改每个table的颜色变色器 ,保存的时候发现修改后的颜色没有保存成功,经过测试发现修改每个table的颜色变色器时,不知道修改的是哪个table的数据,后来经过认真读取iview的文档才发现解决方法,在此记录下 。最初是使用“颜色设置”一列 使用render函
·
在项目中遇到这样一个问题,同一个页面上有多个table,这多个table是使用v-for循环出来的,每个table中都有一个颜色变色器,修改每个table的颜色变色器 ,保存的时候发现修改后的颜色没有保存成功,经过测试发现修改每个table的颜色变色器时,不知道修改的是哪个table的数据,后来经过认真读取iview的文档才发现解决方法,在此记录下 。
最初是使用“颜色设置”一列 使用render函数实现的 如下代码
//使用的iview组件中的table
<div v-for="(item,index) in showTableData" v-show="item.checked">
<div class="margin-bottom-10 margin-top-10" style="font-weight: 700">{{ item.reNodeTitle }}监控展示设置:</div>
<Table border align="center" highlight-row no-data-text="无数据"
:columns="showColumns" :data="item.tableData">
</Table>
</div>
//showColumns是table的列
data(){
return{
showColumns: [
{
type: 'index',
width: 50,
align: 'center',
title: '序号'
},
{
title: '状态',
key: 'nodeStateCode',
align: 'center'
},
{
title: '别名',
key: 'cNodeNewName',
align: 'center'
},
{
title: '颜色设置',
key: 'cNodeColor',
align: 'center',
render: (h, params) => {
if(this.colorScheme === "customScheme"){
return h('div', [
h('el-color-picker', {
props: {
value: params.row.cNodeColor == null ? '' : params.row.cNodeColor,
size: 'mini',
},
on: {
'change': value => {
//此处改变颜色变色器的时候 想知道自己修改的是哪个table中数据?
// 此时不知道怎么去区分 给每个table加了自定义属性也没成功
}
})
]);
}else{
if(params.row.flag === 0){
return h('div', [
h('Icon', {
props: {
type: 'ios-alert' // iview自带的删除icon
},
style: {
fontSize: '14px', // 改变icon的样式
color: params.row.cNodeColor
},
})
]);
}else{
return h('div', [
h('Icon', {
props: {
type: 'ios-checkmark-circle'
},
style: {
fontSize: '14px',
color: params.row.cNodeColor
},
})
]);
}
}
}
},
]
}
效果图如下:由于下方的多个table是v-for渲染出来的,改变颜色变色器的时候,不知道改变的是哪个table的数据,
认真读取iview的文档后发现使用slot直接就解决了以上问题:
在 columns 的某列声明 slot 后,就可以在 Table 的 slot 中使用 slot-scope。
slot-scope 的参数有 3 个:当前行数据 row,当前列数据 column,当前行序号 index。
<div v-for="(item,i) in showTableData" v-show="item.checked">
<div class="margin-bottom-10 margin-top-10" style="font-weight: 700">{{ item.reNodeTitle }}监控展示设置:</div>
<Table border align="center" highlight-row no-data-text="无数据" class="tableMonitor"
:columns="showColumns" :data="item.tableData">
<template slot-scope="{ row,index}" slot="cNodeColor">
<el-color-picker v-model="row.cNodeColor" size="mini"
v-if="colorScheme === 'customScheme'" @change="handleChangeColor(row,i,index)">
</el-color-picker>
<span v-else style="font-size: 14px" class="nvwa-iconfont" :style="{'color':row.cNodeColor}"
:class="row.flag === 1 ? 'icon-_Txiaoxitishi':'icon-_Tchenggongtishi'">
</span>
</template>
</Table>
</div>
</div>
handleChangeColor(row,i,index){
//i就区分了是修改了哪个table中数据
this.showTableData.forEach((item,v)=>{
if(i === v){
item.tableData[index].cNodeColor = row.cNodeColor;
}
})
},
更多推荐
已为社区贡献4条内容
所有评论(0)