elementUi 表格单元格切换编辑状态

最新推荐文章于 2024-11-26 16:59:32 发布

转载最新推荐文章于 2024-11-26 16:59:32 发布 · 852 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/failed/p/10978039.html

文章标签：

#javascript #ui #ViewUI

<div id="app">
   <el-table :data="tableData">
       <el-table-column v-for="(item, idx) in tableColumn" :key="idx" :prop="item.prop" :label="item.label">
          <template slot-scope="scope" >
            <div v-if="scope.column.property === 'editTag'">
                <p v-show="scope.row.editTag.isShow" v-text="scope.row.editTag.value" @click="edit('', scope)"></p>
                <el-input v-show="!scope.row.editTag.isShow" v-model="scope.row.editTag.value" @blur.stop="edit($event, scope)"></el-input>
            </div>
            <div v-else>
                <span v-text="scope.row[item.prop]"></span>
            </div>
            </template>
       </el-table>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
  el: '#app',
  data(){
    return {
      tableData: [
      {
          editTag: {
            isShow: true,
            value: 123
          },
          test: 'Demo'
        }

      ],
      tableColumn: [
        {
          label: '可编辑项',
          prop: 'editTag'
        },
        {
          label: 'demo',
          prop: 'test'
        }
      ]
    }
  },
  methods: {
    edit(value, scope) {
      console.log(scope, value)
      this.$set(this.tableData[scope.$index].editTag, 'isShow', !scope.row.editTag.isShow)
    }
  }
})
</script>