मैं क्यू-टेबल घटक के सेल में रंग शैली बदलना चाहता हूं।

https://codepen.io/abkrim-the-flexboxer/pen/eYYjPZZ

{
  name: 'Active',
  align: 'center',
  label: 'Active',
  field: row => row.active,
  style: val => val ? 'color: red;' : 'color: black;',
  format: val => String(!!val),
  sortable: true
}

लेकिन ये काम नहीं करता.

अगर मैं परीक्षण के लिए प्रयास करता हूं, तो यह सभी कोशिकाओं में काम करता है:

style: 'color: red;'

मुझे लगता है कि यह जेएस में मेरे कोड की गलती है।

1
abkrim 11 नवम्बर 2019, 22:54
चूंकि वैल के आधार पर स्टाइल प्रॉपर्टी का मूल्यांकन किया जा रहा है, इसे वी-बाइंड का उपयोग करके लागू नहीं किया जाएगा: (बस यहां अनुमान लगाएं)।
 – 
Neha Sharma
11 नवम्बर 2019, 23:42

1 उत्तर

मुझे लगता है कि कस्टम शैली वर्ग का उपयोग फ़ंक्शन के रूप में संस्करण 1 से हटा दिया गया है (Ref https:/ /github.com/quasarframework/quasar/issues/242, https://github .com/quasarframework/quasar/issues/2326)। मैंने यह कोशिश की लेकिन यह काम नहीं करता है।

{
  label: 'Message',
  field: 'message',
  classes (val) {
    return val.active==1 ? 'bg-red' : 'bg-yellow'
  },
  sort: true,
  width: '500px'
}

तो सबसे अच्छा तरीका स्लॉट्स का उपयोग करके सिंगल कॉलम को कस्टमाइज़ करना है।

<template v-slot:body-cell-active="props">
  <q-td :props="props" :class="props.row.active==1?'text-red':'text-black'">
    {{props.row.active}}
  </q-td>
</template>

कृपया निम्नलिखित कोड पेन देखें। आपको निचले मामले में सक्रिय कॉलम का नाम बदलना होगा।

https://codepen.io/Pratik__007/pen/xxxaKxg

5
Kai 19 अक्टूबर 2021, 21:41
आपके प्रयास के लिए धन्यवाद। JUts पुरानी पद्धति के बजाय स्लॉट का उपयोग करके विधि देखते हैं, और ठीक काम करते हैं।
 – 
abkrim
12 नवम्बर 2019, 11:02
आप पूरे शरीर स्लॉट को भी अनुकूलित कर सकते हैं। quasar.dev/vue-components/table#Body-slots
 – 
Patel Pratik
12 नवम्बर 2019, 11:26