antd-vue-table自定義列


在表格展示時遇到需要特殊定義的列樣式問題,可以通過 bodyCell自行定義。
<a-table
            id="entity_list_tbl"
            :dataSource="dataList"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            :customRow="customRow"
            :columns="columns"
            :scroll="{ x: 1300, y: 635 }"
            :rowKey="(record: any) => record.id"
          >
            <template #bodyCell="{ text, record, index, column }">
              <template v-if="column.key === 'status'">
                <span v-if="index % 2 == 1" style="color: #40a9ff">正常</span>
                <span v-if="index % 2 == 0" style="color: #da3d16">維修中</span>
              </template>
              <template v-if="column.key === 'repairFlag'">
                <span v-if="record.repairFlag == 'N'" style="color: #40a9ff">{{
                  text
                }}</span>
                <span v-else style="color: #da3d16">{{ text }}</span>
              </template>
              <template v-if="column.key === 'meterFlag'">
                <span v-if="record.meterFlag == 'N'" style="color: #40a9ff">{{
                  text
                }}</span>
                <span v-else style="color: #da3d16">{{ text }}</span>
              </template>
              <template v-if="column.key === 'controlledFlag'">
                <span
                  v-if="record.controlledFlag == 'N'"
                  style="color: #40a9ff"
                  >{{ text }}</span
                >
                <span v-else style="color: #da3d16">{{ text }}</span>
              </template>
              <template v-if="column.key === 'emergencyFlag'">
                <span
                  v-if="record.emergencyFlag == 'N'"
                  style="color: #40a9ff"
                  >{{ text }}</span
                >
                <span v-else style="color: #da3d16">{{ text }}</span>
              </template>
            </template>
          </a-table>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM