码迷,mamicode.com
首页 > 其他好文 > 详细

el-table中操作一栏怎么根据当前行的信息显示编辑、删除、编辑完成按钮

时间:2020-06-27 09:32:13      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:lan   center   edit   相互   back   check   logs   min   this   

 

 

 

<template>
  <div>
    <!-- 将文件名作为最外层类名,为避免相互影响如果直接复制文件请务必更改最外层类名-->
    <div class="base-floorNav">
        <div style="margin: 40px">
            <el-table
            :data="tableData"
            style="width: 100%"
            border
            :header-cell-style="{background:‘#FAFAFA‘}">
                <el-table-column prop="id" label="id" width="60"></el-table-column>
                <el-table-column prop="menu" label="菜单树"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template scope="scope">                    
                        <p v-if="scope.row.status==‘0‘">未授权</p>
                        <p v-if="scope.row.status==‘1‘">已授权</p>             
                    </template>
                </el-table-column>
                <el-table-column :resizable="false" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="primary" plain
                        icon="el-icon-close"
                         v-show="scope.row.status ==‘1‘"
                        @click="handleSelectMenu(scope.$index, scope.row)">取消</el-button>
                        <el-button
                        size="mini"
                        type="primary" plain
                        icon="el-icon-check"
                         v-show="scope.row.status==‘0‘"
                        @click="handleSelectResource(scope.$index, scope.row)">授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  // components: {},
  data() {
    return {
      tableData: [{
          id: ‘1‘,
          menu: ‘+ 菜单1‘,
          status: ‘1‘
        }, {
          id: ‘2‘,
          menu: ‘ - 菜单2‘,
          status: ‘0‘
        }, {
          id: ‘3‘,
          menu: ‘ - 菜单3‘,
          status: ‘1‘
        }]
    };
  },

  created() {},

  mounted() {},

  methods: {
    noAdd() {
      this.$router.go(-1)
    },
  }
};
</script>

<style lang="scss"></style>

 

效果图

技术图片

 

 

 

 

可参考链接: https://www.cnblogs.com/XHappyness/p/7373826.html

技术图片

 

 

        <el-table-column label="操作">
              <template scope="scope">
                 <el-button size="small" type="primary" icon="edit" @click="handleEdit(scope.$index, scope.row)" v-show="typeof(scope.row.propertyId)==‘number‘"></el-button>
                 <el-button size="small" type="danger" icon="delete2" @click="handleDelete(scope.$index, props.row.properties)" v-show="typeof(scope.row.propertyId)==‘number‘"></el-button> 
                 <el-button size="small" type="warning" icon="check" @click="handleEditOk(scope.$index, scope.row)" v-show="typeof(scope.row.propertyId)!==‘number‘"></el-button>
              </template>
            </el-table-column>

 

el-table中操作一栏怎么根据当前行的信息显示编辑、删除、编辑完成按钮

标签:lan   center   edit   相互   back   check   logs   min   this   

原文地址:https://www.cnblogs.com/Antwan-Dmy/p/13197044.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!