【element-ui】el table中的按钮怎么让它不可点击

Z时代
2024-01-10
分类：技术分享

我选择之后，这行的按钮不可点击
图片描述

回答：

可以自定义数据里面增加isDisabled：false 赋值给button的disabled根据选择与否来控制

回答：

绑定scope可以知道当前行

    <el-table
        :data="tableData"
        style="width: 100%"
        :height="height"
        v-loading="loading"
        element-loading-text="拼命加载中"
        @row-dblclick="bdlFn"
    >
        <el-table-column
            v-for="(th,key) in tableHeader"
            :key="key"
            :prop="th.prop"
            :label="th.label"
            :fixed="th.fixed"
            :min-width="th.minWidth"
            :width="th.width"
            align="center"
            :show-overflow-tooltip="true"
        >
            <template slot-scope="scope">
                <el-row class="handle-btn" v-if="th.oper">
                    <el-button
                        v-for="(o, key) in th.oper"
                        :key="key"
                        :type="o.type"
                        size="small"
                        :style="{width:th.oper.length>2&&o.clickType!=='setMenu'?'48px !important':'64px !important'}"
                        @click.native.prevent="handleFn(o.clickType,scope.row)"
                    >{{o.name}}</el-button>
                </el-row>
                <el-row v-else>
                    <span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
                    <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
                </el-row>
            </template>
        </el-table-column>    </el-table>