引入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>
**这里是遇到的问题：**
在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>
