用vue和element-ui实现 展示一个table数据的页面,列表实现一列,label为打分,默认为10分,可以输入,在相应位置加个分数,汇总输入的总和,用具体代码实现
时间: 2023-08-01 21:12:10 浏览: 42
首先,我们需要引入 Vue 和 Element UI:
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue & Element UI Demo</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body>
</html>
```
然后,在 Vue 实例中定义一个数据对象,其中包含一个列表数据和一个总分数:
```js
// app.js
const app = new Vue({
el: '#app',
data: {
tableData: [
{ name: '张三', score: 10 },
{ name: '李四', score: 10 },
{ name: '王五', score: 10 }
],
totalScore: 30
}
});
```
最后,在模板中使用 Element UI 的 `el-table` 组件和 `el-input-number` 组件来渲染表格和输入框,并绑定数据和事件:
```html
<!-- index.html -->
<div id="app">
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="分数">
<template scope="scope">
<el-input-number v-model="scope.row.score" @change="handleScoreChange"></el-input-number>
</template>
</el-table-column>
</el-table>
<p>总分数:{{ totalScore }}</p>
</div>
```
```js
// app.js
const app = new Vue({
el: '#app',
data: {
tableData: [
{ name: '张三', score: 10 },
{ name: '李四', score: 10 },
{ name: '王五', score: 10 }
],
totalScore: 30
},
methods: {
handleScoreChange() {
this.totalScore = this.tableData.reduce((acc, cur) => acc + cur.score, 0);
}
}
});
```
以上代码实现了一个简单的表格,每行包含一个输入框来输入分数,总分数会自动计算并显示在页面上。需要注意的是,我们使用 `v-model` 来双向绑定输入框的值,并在输入框的 `change` 事件中更新总分数。