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>