<el-button type="primary" @click="addDialogVisible = true" icon="el-icon-plus">添加</el-button> 中有没有设置按钮颜色
时间: 2023-07-03 19:06:50 浏览: 99
是的,这里设置了按钮的颜色为主色调(primary)。可以根据需要设置不同的颜色,例如:
- success 成功
- warning 警告
- danger 危险
- info 信息
代码示例:
```
<el-button type="success" @click="addDialogVisible = true" icon="el-icon-plus">添加</el-button>
```
相关问题
<template> <div> <el-button type="primary" icon="el-icon-plus" @click="addRow">新增</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="editRow(scope.$index)">编辑</el-button> <el-button type="text" size="small" @click="deleteRow(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible" title="编辑" :close-on-click-modal="false"> <el-form :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model.number="form.age"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="saveRow">确 定</el-button> </div> </el-dialog> </div></template><script>export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 22 }, { name: '王五', age: 25 }, ], dialogVisible: false, form: { name: '', age: 0, }, editIndex: -1, } }, methods: { addRow() { this.form.name = '' this.form.age = 0 this.dialogVisible = true this.editIndex = -1 }, editRow(index) { this.form.name = this.tableData[index].name this.form.age = this.tableData[index].age this.dialogVisible = true this.editIndex = index }, deleteRow(index) { this.tableData.splice(index, 1) }, saveRow() { if (this.editIndex === -1) { // 新增 this.tableData.push({ name: this.form.name, age: this.form.age, }) } else { // 修改 this.tableData.splice(this.editIndex, 1, { name: this.form.name, age: this.form.age, }) } this.dialogVisible = false }, },}</script>这段代码中editIndex默认是几?如何变化?
editIndex默认是-1,它在addRow和editRow方法中被赋值。在addRow方法中,editIndex被设置为-1,表示新增一行数据;在editRow方法中,editIndex被设置为当前点击的行的索引,表示编辑该行数据。当点击确定按钮保存数据时,根据editIndex是否为-1来判断是新增还是修改操作。
<div class='css-btn-box'> <span style="">可用应用列表</span> <el-button type='primary' plain icon='el-icon-plus' size='mini' @click='appSelect' :disabled='this.currentId==null ? true:false'> 加入 </el-button> </div>设置可用应用列表和加入按钮在同一行
您可以使用CSS中的Flexbox布局来实现这种布局。将包含可用应用列表和加入按钮的div元素设置为flex容器,并将其flex-direction属性设置为row。这样可用应用列表和加入按钮就会在同一行上了。
示例代码如下:
HTML:
```html
<div class="css-btn-box">
<span style="">可用应用列表</span>
<el-button type='primary' plain icon='el-icon-plus' size='mini' @click='appSelect' :disabled='this.currentId==null ? true:false'>
加入
</el-button>
</div>
```
CSS:
```css
.css-btn-box {
display: flex;
flex-direction: row;
align-items: center; /* 可让两个元素垂直居中 */
}
```
阅读全文