专题 | element ul 练习知识合集

 select框缩小

 我之前因为style样式写了scope，所以下面的样式始终不生效，想了好多天都没有想出来，还是后来求助别人，别人一下就指出了我的问题。

<template>
  <div class="hello">
      <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
    }
  }
}
</script>
<style>
.el-input__inner{
  width:40px;
}
</style>

<template>
<div id="app">
<el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="rectdata"
        label="整改日期"
        width="180"
        header-align="center"
        align="center"
        >
        <template slot-scope="{row,$index}">
        <span v-if="!showEdit[$index]">{{row.rectdata}}</span>
        <el-date-picker
      v-model="rectdata[$index]"
      type="date"
      placeholder="选择日期"
      v-if="showEdit[$index]"
      value-format="yyy-MM-dd"
      >
    </el-date-picker>
    </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        header-align="center"
        align="center">
      </el-table-column>
     <el-table-column
        prop="qualified"
        label="是否合格"
        header-align="center"
        align="center">
        </el-table-column>
         <el-table-column
        prop="action"
        label="操作"
        header-align="center"
        align="center"
     
        >
        <template slot-scope="{row,$index}">
          <el-button v-if="!showEdit[$index]" @click="showUpdate($index,row)"> 修改 </el-button>
          <el-button v-if="showEdit[$index]"  @click="submit(row)">确定</el-button>
          <el-button v-if="showEdit[$index]"  @click="cancelupdate($index)">取消</el-button>
          </template>
        </el-table-column>
    </el-table>
  
  </div>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            qualified:'合格',
            action:'操作'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            qualified:'合格',
            action:'操作'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            qualified:'合格',
            action:'操作'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            qualified:'合格',
            action:'操作'
          }],
          showEdit:[],
          rectdata:[],
        }
      },
      methods:{
        showUpdate(index,row){
          if(row.rectdata){
            this.rectdata[index]=row.rectdata
          }else{
            this.rectdata[index]=''
          }
          this.showEdit[index]=true;
          this.$set(this.showEdit,index,true)
        },
        cancelupdate(index){
          this.$confirm('取消修改？','提示',{
            confirmButtonText:'确定',
            cancelButttonText:'取消',
            type:'warning'
          }).then(()=>{
            this.$set(this.showEdit,index,false)
          }).catch(()=>{})
        },
        submit(index,row){
          this.$http({
            url:this.$http.adornUrl('/trouble/update'),
            method:'post',
            params:this.$http.adornParams({
              'id':row.id,
               'rectdata':this.rectdata[index],
            })
          }).then(({data})=>{
            if(data && data.code ===0){
              this.$message({
                message:'操作成功',
                type:'success',
                duration:1500,
                onClose:()=>{
                  this.$set(this.showEdit,index,false)
                }
              })
            }else{
              this.$message.error()
            }
          })
        }
      }
    }
  </script>

直接搭起vue+ementui的架子就可以做了，报错是因为我不知道大佬写的目的是什么的，等我之后看看再改

参考了一位大佬的文章 vue+elementui实现可编辑表格_mm0715的博客-CSDN博客

最后

以上就是留胡子果汁为你收集整理的专题 | element ul 练习知识合集的全部内容，希望文章能够帮你解决专题 | element ul 练习知识合集所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。