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>
posted @ 2022-03-09 15:58  zzs2014  阅读(1905)  评论(0编辑  收藏  举报