element-ui常用组件之Basic——持续更新

这篇博客中主要以element-ui组件为主，我会把工作中用到以及平常见到或是学习到的，与element-ui有关的组件的一些快速提高效率且好用的方法集中写在这里，此博客会一直持续更新。

1. element-ui input and button并排显示

• 1. 页面布局完成；
     https://element.eleme.cn/#/zh-CN/component/form#form-attributes
     image.png

• 2. 代码编写；

<el-form :inline="true" :label-position="labelPosition" label-width="90px" :model="formLabelAlign">  // inline="true" 是显示在同一行，千万不要忘记
    <div>
        <el-form-item  label="登录密码">
             <el-input v-model="formLabelAlign.oldPhone"></el-input>
        </el-form-item>
    </div>
    <div>
        <el-form-item label="新手机号">
            <el-input v-model="formLabelAlign.code"></el-input>
        </el-form-item>
      </div>
    <div>   
        // 最外层用一个div包裹起来，这样与上一行隔开，相当于这个div里的是独立开的
         <el-form-item label="验证码">
             <el-input v-model="formLabelAlign.code"></el-input>
          </el-form-item>
          // 用2个 el-form-item 来单独的把组件包裹起来
          <el-form-item>
             <el-button type="primary" size="small">发送验证码</el-button>
          </el-form-item>
     </div>
</el-form>

• 3. 最终效果图；

image.png

2. element-ui 多选表格实现单选效果

image.png
链接：https://element.eleme.cn/#/zh-CN/component/table

*1. 最终效果

image.png

*2. 代码实现

  <div>
        <el-dialog title="选择节点属性" :visible.sync="dialogFormRemove" width="30%">
          <el-table :data="chooseNode" @selection-change="handleSelectionChange" ref="multipleTable" >//一定要给表格设置这两个参数：@selection-change，ref="multipleTable" 
            <el-table-column type="selection" width="100"></el-table-column>
            <el-table-column property="name" label="节点名称" width="200"></el-table-column>
            <el-table-column  label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="lookClick(scope.row)">确认</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
    </div>

export default{
    data () {
      return {
         multipleTable: [],  // 用来存储table中选中的数据
         chooseNode: [
          {
            name: '普通节点'
          },
          { 
            name: '付款节点'
        }
      ]
    }
  },
  // 添加节点实现单选
methods: {
    handleSelectionChange (val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      } else {
        this.multipleTable = val.pop()
      }
    }
}
}