ant-design table 表格头增加tooltip注释

最新推荐文章于 2024-05-22 11:03:26 发布

灿烂牵羊

最新推荐文章于 2024-05-22 11:03:26 发布

阅读量1.9k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_37107017/article/details/126156516

版权

ant-design table 表格头增加tooltip注释

注意屏蔽掉columns中的title属性才会有效果

<a-table
        :loading="loading"
        :size="tableSize"
        rowKey="id"
        :columns="columns"
        :data-source="list"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :pagination="false"
      >
         <span slot="statisticalFactor">
          统计系数
          <a-tooltip placement="top">
            <template slot="title">
              <span> 统计系数，对日用量的稳定判断，无特殊情况可取1.0 </span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="growthRate">
          增长率
          <a-tooltip placement="top">
            <template slot="title">
              <span> 预计此物料未来的增加可能性，或基于特殊需求预估 </span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="strategicFactor">
          战略系数
          <a-tooltip placement="top">
            <template slot="title">
              <span> 基于策略性要求，进行的特别准备，通常由管理层决策设定 </span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="strategicNumber">
          战略数量
          <a-tooltip placement="top">
            <template slot="title">
              <span> 基于策略性要求，进行的特别准备，通常由管理层决策设定 </span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="status" slot-scope="text, record">
          {{ statusFormat(record) }}
        </span>
        <span slot="operation" slot-scope="text, record">
          <a-divider type="vertical" v-hasPermi="['ssc:materialStabilityFactor:edit']" />
          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['ssc:materialStabilityFactor:edit']">
            <a-icon type="edit" />修改
          </a>
          <a-divider type="vertical" v-hasPermi="['ssc:materialStabilityFactor:remove']" />
          <a @click="handleDelete(record)" v-hasPermi="['ssc:materialStabilityFactor:remove']">
            <a-icon type="delete" />删除
          </a>
        </span>
      </a-table>

--表格columns 用slots插槽注入--------------------------------------------------------------
      columns: [
        // {
        //   title: '主键',
        //   dataIndex: 'id',
        //   ellipsis: true,
        //   align: 'center'
        // },
        {
          title: '物料编码',
          dataIndex: 'materialCode',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '供应商型号',
          dataIndex: 'supplierModel',
          ellipsis: true,
          align: 'center'
        },
        {
          // title: '统计系数',
          dataIndex: 'statisticalFactor',
          ellipsis: true,
          align: 'center',
          slots: { title: 'statisticalFactor' },
        },
        {
          // title: '增长率',
          dataIndex: 'growthRate',
          ellipsis: true,
          align: 'center',
          slots: { title: 'growthRate' },
        },
        {
          // title: '战略系数',
          dataIndex: 'strategicFactor',
          ellipsis: true,
          align: 'center',
          slots: { title: 'strategicFactor' }
        },
        {
          // title: '战略数量',
          dataIndex: 'strategicNumber',
          ellipsis: true,
          align: 'center',
          slots: { title: 'strategicNumber' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '18%',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ]