element的表格index自定义_element-ui简单笔记(下)

element-ui的简单笔记

关注一下公众号：内有相关文章！！

九、消息提示

警告提示

1.1 创建警告提示

<el-alert title="成功信息提示" :closable="false" type="success">
  <div slot>我是辅助信息</div>
</el-alert>
<el-alert title="成功信息提示" type="info"></el-alert>
<el-alert title="成功信息提示" type="warning"></el-alert>
<el-alert title="成功信息提示" type="error"></el-alert>

1.2属性的使用

<el-alert title="成功信息提示" effect="dark" :show-icon="true" center :closable="false" type="success">
  <div slot>我是辅助信息</div>
</el-alert>

9.2 Message消息提示

2.1 创建组件

• 注意:这个组件的创建无须在页面中书写任何标签,他是一个js插件,在需要展示消息提示的位置直接调用提供的js插件方法即可

# 1.创建最简单的消息
    this.$message('这是一个消息提示!!')

# 2.自定义消息内容
    this.$message({
    
    message: h('p', null, [
      h('span', null, '订单创建成功,您的订单编号为: '),
      h('i', {
     style: 'color: teal' }, '87')
    ])
  });

# 3.不同主题的消息提示
     this.$message({
    
     message:'这是信息提示',
     type:"success",
   })
        //主题样式:  success  info  warning  error

# 4.属性使用
    this.$message({
    
    message:'这是信息提示',
    type:"success",
    showClose:true,
    center:true,
    iconClass:'el-icon-user-solid',
    duration:0
  })
# 5.方法的使用
    this.$message.closeAll();

十、table表格组件

1.组件的创建

<el-table :data="tableData">
  <el-table-column prop="id" label="编号"></el-table-column>
  <el-table-column p