vue.js 加elementui实现输入表格
1 业务人员画的原型图需要该种table,但是原生的elementui并没有这种表格,对于我这种前端白痴来说,已经是非常难了。2 在大神指导下,有了初步了解,具体原理,因为对js不甚熟悉,只是会用基本的前端知识,所以此处不展开追究,后期有机会学习3 动态增加列,可以通过点击按钮,不断增加列4 仅以此记录,以便后期用到,可以提高工作效率以供参考 <el-table ref="
·
1 业务人员画的原型图需要该种table,但是原生的elementui并没有这种表格,对于我这种前端白痴来说,已经是非常难了。
2 在大神指导下,有了初步了解,具体原理,因为对js不甚熟悉,只是会用基本的前端知识,所以此处不展开追究,后期有机会学习
3 动态增加列,可以通过点击按钮,不断增加列
4 仅以此记录,以便后期用到,可以提高工作效率以供参考
<el-table ref="singleTable" :data="reqMsgSetForm.data" border style="width: 100%" max-height="250">
<el-table-column type="selection"></el-table-column>
<el-table-column type="index" :resizable="true"></el-table-column>
<el-table-column label="字段id" :resizable="true" prop="fldId"></el-table-column>
<el-table-column label="保存值" :resizable="true" prop="fixVal"></el-table-column>
<el-table-column label="字段名" :resizable="true">
<template scope="scope">
<el-input v-model="scope.row.fldNm"></el-input>
</template>
</el-table-column>
<el-table-column label="字段描述" :resizable="true">
<template scope="scope">
<el-input v-model="scope.row.fldDesc"></el-input>
</template>
</el-table-column>
<el-table-column label="默认值" :resizable="true">
<template scope="scope">
<el-input v-model="scope.row.defVal"></el-input>
</template>
</el-table-column>
<el-table-column v-for="col in cols" :label="col.label">
<template scope="scope">
<el-input v-model="scope.row[col.prop]" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
</el-table>
通过使用template就可以使用了,而且scope制定了该行数据有效(貌似这样个意思)
具体代码可以下载:https://download.csdn.net/download/liuhua121/10407521
更多推荐
已为社区贡献2条内容
所有评论(0)