el-table 中的东西 一般都是生成一堆一样的数据 , 我们想给他动态控制 ,每一行的占位符都不一样 , 如何做到呢 ? 效果图 :
思路解析
这里如果想要控制每一行 , 最简单有效的方法就是利用scope.row , 他是区分每一行最简单有效的方法 ! 赋值的话 , 我们就scope.row.属性名
代码
<body
>
<div id
="one">
<template
>
<el
-table
:data
="tableData" style
="width: 100%" border
>
<!--第一列数据
-->
<el
-table
-column prop
="name" label
="名称" width
="499px" align
="center">
</el
-table
-column
>
<!--第二列数据
-->
<el
-table
-column prop
="zhi" label
="值" width
="430px" align
="center">
<template slot
-scope
="scope">
<el
-input
:placeholder
="scope.row.holder" style
="width:350px" v
-model
.number
="scope.row.zhi" :disabled
="scope.row.id==1">
</el
-input
>
</template
>
</el
-table
-column
>
</el
-table
>
</template
>
</div
>
</body
>
<script
>
new
Vue({
el
:"#one",
holder
:"",
data
:{
tableData
:[
{name
:"我是X",zhi
:'',id
:'1',holder
:"XXX"},
{name
:"我是Y",zhi
:'',id
:'2',holder
:"YYY"},
{name
:"我是Z",zhi
:'',id
:'3',holder
:"ZZZ"},
]
},
methods
:{ },
});
</script
>
