vue table数据展示以及确认框

最新推荐文章于 2025-03-17 23:54:37 发布

原创最新推荐文章于 2025-03-17 23:54:37 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js中使用Element UI库来实现表格数据的动态显示，包括根据状态值显示不同颜色的文本。同时，展示了如何控制表格的高度以适应页面大小，并提供了确认弹框的实现，用于执行如用户删除等关键操作，包含校验、确认和错误处理流程。

1、el-table 数据展示

(1)第一种

            <el-table-column label="状态"  width="180px" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.userState==0" >正常</span>
                <span v-if="scope.row.userState==1" style="color: red">冻结</span>
                <span v-if="scope.row.userState==2" style="color: green">异常</span>
              </template>
            </el-table-column>

(2)第二种

    <el-table-column label="支付状态" :formatter="state"  width="80px" align="center">
      </el-table-column>


      state(row, column) {
        if (row.state === 0) {
          return '未支付'
        } else if (row.state === 1) {
          return '已支付'
        }
      },

2、控制el-table大小显示

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="载入中"
      border
      fit
      stripe
      highlight-current-row
      :height="tableHeight" //控制高度
      width="100%"
    >
    </el-table>

 tableHeight: null,

 mounted:function(){
      this.listLoading = false
      this.tableHeight = window.innerHeight - 300
    },

3、确认弹框

    <el-card class="box-card" style="margin-bottom: 20px;height: 80px">
      <el-form ref="ruleForm" :model="info" :rules="rules" label-position="right" label-width="20px" style="width: 100%; margin-left:0px; height: 30px">
        <el-row>

          <el-form-item label="" prop="userId">
            <el-input style="width: 30%" v-model="info.userId" placeholder="批量删除"/>
            <el-button style="width: 100px" type="primary" @click="submitForm('ruleForm')">
             删除
            </el-button>
          </el-form-item>

        </el-row>
      </el-form>
    </el-card>

    methods: {
      onJsonChange(value) {
        console.log('value:', value)
      },
      frozenUsers() {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var url = this.HOST + '/xx/xxx'
          var qs = require('qs');
          this.$axios.post(url, qs.stringify(this.info), {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
          })
            .then(res => {
              if (res.data.needReLogin === 1) {
                this.$store.dispatch('LogOut').then(() => {
                  location.reload()
                })
              }
              if (res.data.state==true){
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success',
                  duration: 2000
                })
              }else {
                this.$notify.error({
                  title: '失败',
                  message: res.msg,
                  duration: 2000
                })
              }
            })
            .catch(error => {
              console.log(error)
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })



      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {  //开启校验
          if (valid) {   // 如果校验通过，请求接口，允许提交表单
            this.frozenUsers()
          } else {   //校验不通过
            return false;
          }
        });
      }

    }