VueJs - 有条件地显示 table 中的元素

Question

我这里的用户 table 非常简单，只有 4 列，我想根据每个用户的状态 'isActive' 显示一个按钮。如果用户处于活动状态，我想显示带有文本 'disable' 的按钮，反之亦然。我对此有点困惑，因为我不知道如何显示这些按钮，因为我正在为这个项目（管理面板）使用 vuexy 模板。有没有办法用 JSX 做到这一点？请看一下代码，我正在使用 nodejs 从 mysql 获取数据。问我是否需要更多信息。谢谢

<template>
<div>
  <div class="container">
    <b-card-text class="mb-2">
      <div
        v-if="showLoginError"
        class="text-center bg-danger colors-container rounded text-white width-360 height-50 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow"
      >
        <span>{{ loginError }}</span>
      </div>
    </b-card-text>
    <b-card-text class="mb-2">
      <div
        v-if="showSuccessMessage"
        class="text-center bg-success colors-container rounded text-white width-360 height-50 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow"
      >
        <span>{{ successMessage }}</span>
      </div>
    </b-card-text>
    <section id="card-actions" class="input-section">
      <b-row>
        <b-col cols="8">
          <b-card-actions ref="cardAction">
            <validation-observer ref="simpleRules">
              <b-form>
                <b-row>
                  <b-col md="6">
                    <b-form-group>
                      <validation-provider
                        #default="{ errors }"
                        name="First Name"
                        rules="required"
                      >
                        <b-form-input
                          v-model="name"
                          :state="errors.length > 0 ? false:null"
                          placeholder="Twitter username"
                        />
                      </validation-provider>
                    </b-form-group>
                  </b-col>
                  <b-col cols="12">
                    <b-button
                      variant="primary"
                      type="submit"
                      @click.prevent="validationForm"
                    >
                      Submit
                    </b-button>
                  </b-col>
                </b-row>
              </b-form>
            </validation-observer>
          </b-card-actions>
        </b-col>
      </b-row>
    </section>
    // This is table
    <b-table responsive="sm" :items="items"/>
  </div>
</div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import {
  BFormInput, BFormGroup, BForm, BRow, BCol, BButton, BTable,
} from 'bootstrap-vue'
import { required } from '@validations'
import axios from 'axios'
import { getUserToken } from '@/auth/auth'

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
    BFormInput,
    BFormGroup,
    BForm,
    BRow,
    BCol,
    BButton,
    BTable,
  },
  data() {
    return {
      name: '',
      successMessage: '',
      showSuccessMessage: false,
      loginError: '',
      showLoginError: false,
      required,
      items: [],
    }
  },
  beforeMount() {
    this.getAllUsers()
  },
  methods: {
    getAllUsers() {
      const API_URL = `${this.$server}/api/twitter/allusers`
      const params = {
        token: getUserToken(),
      }
      axios.post(API_URL, null, { params }).then(res => {
        if (res.data) {
          res.data.forEach(element => {
            let isActive = 'active'
            if (element.isActive === 0) {
              isActive = 'disabled'
            }
            const arr = {
              twitter_name: element.twitter_name,
              twitter_username: element.twitter_username,
              twitter_id: element.twitter_id,
              userActive: isActive,
            }
            this.items.push(arr)
          })
        }
      })
    },
    validationForm() {
      const API_URL = `${this.$server}/api/twitter/adduser`
      const params = {
        twitter_username: this.name,
        token: getUserToken(),
      }
      axios.post(API_URL, null, { params }).then(res => {
        if (res.data.success) {
          this.successMessage = res.data.message
          this.showSuccessMessage = true
          // Hide message after 5sec
          setTimeout(() => {
            this.successMessage = ''
            this.showSuccessMessage = false
          }, 5000)
        } else {
          this.loginError = res.data.message
          this.showLoginError = true
          // Hide message after 5sec
          setTimeout(() => {
            this.loginError = ''
            this.showLoginError = false
          }, 5000)
        }
      })
    },
  },
}
</script>

Answer 1

我有点困惑，你想在哪里显示你的按钮？如果它在 table 中，您可以使用 Bootstrap-Vue 的自定义模板，您将在此处找到带有示例的文档：https://bootstrap-vue.org/docs/components/table#custom-data-rendering

编辑：这里是您案例的示例

    <b-table responsive="sm" :items="items">
        <template #cell(userActive)="data">
            <b-button v-if="data.userActive">Disabled</b-button>
            <b-button v-else>Enabled</b-button>
        </template>
    </b-table>

VueJs - 有条件地显示 table 中的元素

VueJs - Conditionaly showing elements in table

jsx

vue.js

conditional-rendering