实习笔记-element-ui的一些使用记录

1.element-ui表格列el-table-column如何根据数据不同显示不同的值，获取prop值

方法一、格式化数据

1. 在使用element-ui的表格时，有时候后台给你的字段和你要显示在表格列里的内容不一致。
2. 例如后台给的字段是state，它的值为true或false，要求显示在表格里是‘正确’或‘错误’ 这时可以给el-table-column添加一个属性：formatter，代码如下：

<el-table ref="accountTable"
  :data="accountsListData"
  border>
  <el-table-column label="状态" prop="state" :formatter="stateFormat"></el-table-column>
</el-table>

   methods:{
      stateFormat(row, column) {
        if (row.state === true) {
          return '正确'
        } else  {
          return '错误'
        } 
      },
    }

或者：

  formatStatus(row, column) {
      return row.status == 'Y' ? '已执行' : '未执行'
    },

方法二：直接在template scope 使用v-if判断

<el-table-column prop="status" label="显示状态">
  <template scope="scope">
    <span v-if="scope.row.status=== 1">在线</span>
    <span v-else-if="scope.row.status=== 0">离线</span>
  </template>
</el-table-column>

获取element-ui表格中的渲染的prop值

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-table-column label="修改">
      <el-link :underline="false" icon="el-icon-edit" @click="clickChange(scope.row.id)">修改</el-link>
    </el-table-column>
    <el-table-column label="删除">
      <el-link :underline="false" icon="el-icon-delete">删除</el-link>
    </el-table-column>
  </template>
</el-table-column>

label是显示的文字

prop是对应后台获取数据的属性名

文章参考地址

2. el-select获取选中的 label跟 value

一、方案如下：

1. 给el-select加上ref ='myselected' 代码如下（示例）：

<el-select v-model="value" ref = ‘mySelected’ placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

获取的话用：this.$refs.myselect.selected.label,选中值就是 this.$refs.myselect.selected.value

2. 在value获取 代码如下（html示例）：

<el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="`${item.value},${item.label}`"
      @change="handleChange">
    </el-option>

代码如下（js示例）：

这种方法属于取巧方案其中value, label就是我们所需的值了，一般放在表单提交时获取转换获取值 。

options: [
      {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, ],
 
handleChange(val){
       let [value, label] = val.split(",");
     },

3. 在change添加监听循环获取 代码如下（html示例）：

<el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
       @change="handleChange">
    </el-option>

代码如下（js示例）：

  options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
     
    handleChange(val){
           let checkLabel = this.options.find( item => item.value ==val).label
         },

3. 修改element-ui组件的样式

.borderNone /deep/ .el-input__inner {
    border: none;
}

六月更文计划02