el-table 表格内如何根据变量禁用或条件渲染按钮

导入

在使用elementUI组件时，打交道最多的就是table 和form，一个呈现后端数据，一个与用户交互，增加或修改数据。

table 中几乎必备一个操作列，其中一般有编辑按钮和 删除按钮，但是有时候我们会希望根据变量值来条件渲染按钮。啥意思？

应用场景

假设一个消息表格中呈现了用户[a, b, c, d]四个人相互之间发布的n条消息，现在用户a登录了系统，他有这个消息菜单，看到了这个列表，发现所有消息的操作列都可以进行编辑和删除，大家觉得有问题吗？

肯定有问题，他怎么能编辑其他用户发表的消息呢？好家伙，盖了章的东西，还能任由他人随意修改！

这个时候，我们有两种处理方法：

• 按钮全部渲染出来。但是，不是你的东西我给你禁用了。哎，不能点，这你没辙了吧！
• 按钮条件渲染出来——你无权编辑的消息，直接不给你渲染出这个按钮！

Let’s go

操作列通用代码：

	<el-table-column
    	fixed="right"
	    label="操作"
	   	width="180">
        <template slot-scope="scope">
            <el-button
                @click="editMessage(scope.row)"
                type="success"
                size="small" round>
                编辑
            </el-button>
            <el-button
                @click="deleteMessage(scope.row.id)"
                type="danger"
                size="small" round >
                删除
            </el-button>
        </template>
	</el-table-column>

解释：scope.row 代表这一行的数据。
效果：

常见动态设置禁用按钮是通过设置disabled，如

	<el-button
		@click="editMessage(scope.row)"
		type="success"
		size="small" round
		:disabled="scope.row.state == 1"> <!--scope.row.state === '已完成'? true：false -->
		编辑
	</el-button>

通过 二元表达式 或 三元表达式 判断该行数据中的某个值是否匹配某个状态值，或字符串来禁用该按钮。但是这样却带来一个问题，如何匹配一个全局变量呢？其中this.$store.state.usename 为store中存储的全局变量，存储当前登录的用户名。

	<el-button
		@click="editMessage(scope.row)"
		type="success"
		size="small" round
		:disabled="scope.row.state === this.$store.state.username">
		编辑
	</el-button>

结果却出现错误，即该变量无法在template中使用。

这时候就需要采用函数式解决办法了！

---

2021/4/25

感谢博主Bessie cheng 的指导，对于无法使用变量的情况，其实是可以使用的，在此可以直接使用
$store.state.username，这样就可以了！

---

1、全部渲染但动态禁用按钮

	<el-button
	    @click="editMessage(scope.row)"
	     type="success"
	     size="small" round
	     :disabled="!initEditable(scope.row)"
	     >
	     编辑
     </el-button>

<script>
export default {
    name: "MessageList",
    data() {
        return {
        }
    },
    mounted () {
        this.initEditable()
    }，
    methods: {
        initEditable(data) {
            //初始化编辑按钮是否可用，只有当发布者是自己的时候才可以编辑
            return data && data.publisherId === this.$store.state.username;
        },
    }
}
</script>

即然" "括号内无法使用this调用的变量，那么就放在methods函数里。这样返回值就能够禁用某些列了！

显示效果：

2、条件渲染按钮

	<el-button
	   	@click="editMessage(scope.row)"
	    type="success"
	    size="small" round
	    v-if="initEditable(scope.row)">
	   编辑
	</el-button>

函数还是上面的，利用v-if来条件渲染按钮。
效果图：

结尾

Vae 他有一些烦恼

反正现在的年轻人

都有许多烦恼

那么多要思考

那么多要寻找

诱惑太多 不坚定就犯错了