使用vue的一些个小案例

目录

1.动态修改表格中的某个码值

2.动态下拉框 

3.静态下拉框

4.点击一个按钮弹出一个新的页面 

5.下拉框添加搜索功能

6.动态添加行

---

---

1.动态修改表格中的某个码值

  <el-table-column align="center" prop="applicationState" label="任务状态" class="table-width">
          <template slot-scope="scope">
            <span v-if="scope.row.applicationState == 0">启动成功</span>
            <span v-else-if="scope.row.applicationState == 1">停止（手动）</span>
            <span v-else-if="scope.row.applicationState == 2">异常停止</span>
            <span v-else-if="scope.row.applicationState == 3">自动恢复</span>
            <span v-else>--</span>
          </template>
  </el-table-column>

2.动态下拉框 

<el-select class="filter-item" v-model="query.bussinessId" clearable   placeholder="请选择业务线" style="width:150px;" >
  <el-option v-for="item in bussinessListOptions" :key="item.value" :label="item.label" :value="item.value">
   </el-option>
</el-select>


bussinessListOptions:[],


getBusinessList() {
        realtimeAppApi.getALLBusinessInfo().then(response => {
          const data = response.data.data
          this.bussinessListOptions = data.map(item => {
            return { label: item.name, value: item.id }
          })
        }).catch(error => {
          this.$notify({
            title: '失败',
            message: '获取数据源失败' + error.toString(),
            type: 'fail',
            duration: 5000
          })
        })
      },

3.静态下拉框

<el-select clearable size="medium" class="filter-item"
                 placeholder="任务状态" v-model="query.applicationState">
        <el-option v-for="item in applicationStateList" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>


 export default {
    data() {
      return {
        applicationStateList:[{id:'0',name:'启动成功'},
          {id:'1',name:'停止（手动）'},
          {id:'2',name:'异常停止'},
          {id:'3',name:'自动恢复'}]
             }
            }
    }

4.点击一个按钮弹出一个新的页面 

详情查看https://blog.csdn.net/oracle8090/article/details/108204638

① 父页面 

1、在父页面最外层div里面写入自定义标签 
<add-or-update ref="addOrUpdate"></add-or-update>
2、在scrpit中导入模块
import AddOrUpdate from './appEditSql.vue'
3、注册
   components: {
      AddOrUpdate,
  },
4、写按钮 
          <el-button type="primary" icon="el-icon-edit"  size="mini" @click="addOrUpdate(scope.row)">编辑</el-button>
5、在按钮中添加方法 
      addOrUpdate(row) {
        this.tmpJob = Object.assign({}, row)
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(this.tmpJob);
        })
      },

② 子页面

 <el-dialog :append-to-body="true"  :close-on-click-modal="false" :visible.sync="visible" top="5vh" width="1500px">
      <el-form  ref="dataForm" :model="form" label-position="right" label-width="160px"
               style='width: 1300px; margin-left:10px;'>
         <el-form-item label="flinksql" prop="flinksql">
          <el-input type="textarea" rows="4" v-model="form.flinksql" placeholder="flinksql"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button  type="primary" @click="updateData()">确 定</el-button>
      </div>
    </el-dialog>


data() {
    return {
     visible:false
   }
 }

 methods: {
    init(tmpJob){
        this.visible=true
        this.form.id=tmpJob.id
       
    },
}

5.下拉框添加搜索功能

使用标签 

<el-select class="filter-item" filterable   :filter-method="dataFilter" v-model="query.bussinessId" clearable   placeholder="请选择业务线" style="width:150px;" >
          <el-option v-for="item in bussinessListOptions" :key="item.key" :label="item.display" :value="item.key">
          </el-option>
        </el-select>



<script>
##js代码 ,主要定义两个集合 存放一样的数据
getBusinessList() {
        realtimeAppApi.getALLBusinessInfo().then(response => {
          const data = response.data.data
          this.bussinessListOptions = data.map(item => {
            return { display: item.name, key: item.id }
          })
          this.busCopy=this.bussinessListOptions
        }).catch(error => {
          this.$notify({
            title: '失败',
            message: '获取数据源失败' + error.toString(),
            type: 'fail',
            duration: 5000
          })
        })
      },



添加下拉框搜索的方法 
      dataFilter(val){
         if(val){
              this.bussinessListOptions=this.busCopy.filter((item=>{
                if (!!~item.display.indexOf(val) || !!~item.display.toUpperCase().indexOf(val.toUpperCase())) {
                 return true
                  }
                }))
 
           }else{
                this.bussinessListOptions=this.busCopy
            }

      }
</script>

6.动态添加行

      <el-dialog :title="textMap[dialogDimStatus]" :visible.sync="dialogDimFormVisible" width="800px">
        <el-form :rules="rules" ref="dataDimForm" :model="tmpApp" label-position="left" label-width="120px"
                 style='width: 800px; margin-left:50px;'>  
         <i class="el-icon-circle-plus" @click="addField"></i>
        <el-table :data="fieldList" fit highlight-current-row style="width: 700px" fixed="left">
           <el-table-column align="center" label="名称" width="400px">
            <template slot-scope="scope">
              <el-input size="medium" align="left" v-model="scope.row.params"/>
            </template>
          </el-table-column>
        <el-table-column align="center" label="参数" width="400px">
            <template slot-scope="scope">
              <el-input size="medium" align="left" v-model="scope.row.params"/>
            </template>
          </el-table-column>

          

          <el-table-column align="center" label="操作" width="50px">
            <template slot-scope="scope">
              <el-button size="mini" type="info" class="el-icon-delete" @click="deleteField(scope.$index)"></el-button>
            </template>
          </el-table-column>

        
        </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogDimFormVisible = false">取 消</el-button>
          <el-button  type="primary" @click="createDimData">确 定</el-button>
        </div>
      </el-dialog>


<script>
 const tmpDim ={
    baseDimTableId:null,
    params:null
  }

export default {
    components: {},
    data() {
      return {
       fieldList:[],
      dialogDimFormVisible:false, 
        textMap: {
          update: '编辑',
          create: '创建'
        },
        tmpApp: deepClone(tmp),
        rules: {
          name: [
            {required: true, message: '表名必填', trigger:'blur'}
          ],
          alias: [
            {required: true, message: '表别名必填', trigger: 'blur'},
            {min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur'}
          ],
          sql:[{required: true, message: 'sql必填', trigger: 'blur'}],
          status:{required: true, message: '请选择表状态', trigger: 'change'},
        },
      }
    },
    created() {


    },
	mounted(){
   
    },
    watch: {


    },
    methods: {
        addField(){
          let dimField = deepClone(tmpDim);
          this.fieldList.push(dimField)
      },
     deleteField(index){
          this.fieldList.splice(index, 1)
      },
      createDimData() {
          let fieldList = this.fieldList;
          if(this.checkFieldList(fieldList) == false){
            return
          }         
         alert(JSON.stringify(fieldList))
      },
      checkFieldList(fieldList){
        if(fieldList == null || fieldList.length==0){
          this.$notify({
            title: '提示信息',
            message: '字段信息必填',
            type: 'warn',
            duration: 3000
          })
          return false
        }
        for (let i = 0; i < fieldList.length; i++) {
          let baseDimTableId = fieldList[i]['baseDimTableId']
          let params = fieldList[i]['params']
          if(!baseDimTableId || !params){
            this.$notify({
              title: '提示信息',
              message: '名称，参数必填，请检查',
              type: 'warn',
              duration: 3000
            })
            return false
          }
        }

      },
    }
  }


</script>