热门标签
热门文章
- 1【深度学习8】Pytorch使用及使用小案例_pytorch 案例
- 2uboot命令解释与运行分析_usage unkown command fash
- 3CSU1826-Languages-AC自动机_ztod
- 4Linux 摄像头驱动_linux摄像头驱动
- 5baidu google 开发搜索引擎_自定义百度搜索入口网址
- 6Mybatis学习_mybatis if or
- 7Android:SQLite_android sqlite
- 8Pytorch中多GPU并行计算教程_pytorch并行计算
- 9【2020年数据分析岗面试题】不断更新...（含自己的理解、思考和简答）_3. 扑克牌54张,平均分成2份,求这2份都有2张a的概率
- 10NTFS for Mac 2023安装激活使用教程（2023最新指南）
当前位置: article > 正文
element-ui 表格可编辑_elementui可编辑表
作者：笔触狂放9 | 2024-03-06 20:05:34
赞
踩
elementui可编辑表
- <template>
- <el-table :data="tableData" style="width: 100%" @cell-click="handleEdit">
- <template v-for="(item, index) in columData">
- <el-table-column :label="item.label" :key="index" :prop="item.prop">
- <template slot-scope="scope">
- <el-input
- @blur="blur"
- ref="flag"
- v-if="
- item.edit == true && 'flag' + item.prop + scope.row.index == value
- "
- v-model="scope.row[scope.column.property]"
- ></el-input>
-
- <span v-else>{{ scope.row[scope.column.property] }} </span>
- </template>
- </el-table-column>
- </template>
- </el-table>
- </template>
-
- <script>
- export default {
- data() {
- return {
- value: "",
- columData: [
- {
- label: "姓名",
- prop: "name",
- edit: true,
- },
- {
- label: "地址",
- prop: "address",
- },
- ],
- tableData: [
- {
- index: 0,
- name: "chen虎",
- address: "1518 弄",
- },
- {
- index: 1,
- name: "小虎",
- address: "1517 弄",
- },
- {
- index: 2,
- name: "王虎",
- address: "1519 弄",
- },
- {
- index: 3,
- name: "王小",
- address: " 1516 弄",
- },
- ],
- };
- },
- methods: {
- handleEdit(row, e) {
- this.value = "flag" + e.property + row.index;
- this.$nextTick(() => {
- if (this.$refs.flag[0]) {
- this.$refs.flag[0].focus();
- }
- });
- },
- blur() {
- this.value = "";
- },
- },
- };
- </script>
-
- <style scoped lang="less">
- </style>
效果
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签
