0
点赞
收藏
分享

微信扫一扫

关于Element UI在表格中添加Button不显示的问题(已解决)

boom莎卡拉卡 2022-03-30 阅读 76

Element UI采用了外部引入的方式:

<!--引入 element-ui 的样式,-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue,  后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

整体代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        .el-table .warning-row {
            background: oldlace;
        }
 
        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
 
 
</head>
<body>
 
<div id="family">
 
    <template>
        <el-table
                :data="familyData"
                style="width: 100%"
                :row-class-name="familytableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="家庭住址"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="work"
                    label="职业"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="marriage"
                    label="婚姻"
                    align="center">
            </el-table-column>
 
            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">按钮1</el-button>
                    <el-button type="danger">按钮2</el-button>
                </el-row>
 
            </el-table-column>
 
 
        </el-table>
    </template>
 
    <el-row>
        <el-button type="primary">按钮1</el-button>
        <el-button type="danger">按钮2</el-button>
    </el-row>
 
</div>
 
 
<!--引入 element-ui 的样式,-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue,  后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
 
 
<script>
    new Vue({
        el:"#family",
        methods: {
            familytableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            }
        },
        data() {
            return {
                //复选按钮点击判断
                multipleSelection: [],
                //家庭成员信息
                familyData: [{
                    name: '张三',
                    sex: 1,
                    age: 23,
                    address: '无',
                    work: '学生',
                    marriage: 0,
                }, {
                    name: '张三',
                    sex: 1,
                    age: 23,
                    address: '无',
                    work: '学生',
                    marriage: 0,
                }, {
                    name: '张三',
                    sex: 1,
                    age: 23,
                    address: '无',
                    work: '学生',
                    marriage: 0,
                }, {
                    name: '张三',
                    sex: 1,
                    age: 23,
                    address: '无',
                    work: '学生',
                    marriage: 0,
                }]
            }
        }
    });
</script>
 
 
 
 
 
</body>
</html>


出现问题的代码部分:

            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">按钮1</el-button>
                    <el-button type="danger">按钮2</el-button>
                </el-row>
 
            </el-table-column>
 
 
        </el-table>
    </template>
 
    <el-row>
        <el-button type="primary">按钮1</el-button>
        <el-button type="danger">按钮2</el-button>
    </el-row>

出现的问题:

 

问题:在table外部添加button可以显示,但是在table里面添加button却没有显示


解决方法:

出现问题的部分这样写就可以了

<el-table-column
                    align="center"
                    label="操作">
 
<template slot-scope="scope" >
 
                <el-row>
                    <el-button type="primary">按钮1</el-button>
                    <el-button type="danger">按钮2</el-button>
                </el-row>
 
</template>
 
            </el-table-column>


感谢这位大哥:

 如果有用的话可以给一个小赞吗🤭

举报

相关推荐

0 条评论