基础不扎实的计算机小白 2022-03-30 01:22 采纳率: 100%
浏览 766
已结题

关于element ui在表格中添加button不显示的问题，找不到解决办法

引入element方式的外部连接：


```html
<!--引入 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>



**这里是遇到的问题：**
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/884603475846139.png "#left")

在table外部添加button可以显示，但是在table里面添加button却没有显示，这个是什么原因呢？

**这是我的代码：**


<!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>


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/498655995846138.png "#left")
  • 写回答

2条回答 默认 最新

  • 你好！机器人 2022-03-30 07:21
    关注

    这样写

    
<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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 4月7日
  • 已采纳回答 3月30日
  • 修改了问题 3月30日
  • 创建了问题 3月30日