如何改变Antd中展开子表格按钮的位置和样式

如何改变Ant Design Vue中展开子表格按钮的位置和样式

一水壶

5458人浏览 · 2022-05-19 20:32:25

一水壶 · 2022-05-19 20:32:25 发布

注：使用Ant Design Vue 2.2.8版本进行代码演示，原代码是Antd 2.2.8版本中嵌套子表格中的代码。

Antd默认的展开子表格的按钮有时候我们并不想放在第一列，也不想是这样的默认图标，此时就可以做一个改变。

一、改变展开按钮位置

<a-table
      :columns="columns"
      :data-source="data"
      class="components-table-demo-nested"
      :expandIconColumnIndex="3"
      :expandIconAsCell="false"
></a-table>

在原本代码的基础上，在<a-table>中添加

:expandIconColumnIndex="3"

:expandIconAsCell="false"

想把展开按钮放在第几列，就给expandIconColumnIndex设置多少值（第1列为0，以此类推）

expandIconAsCell这个属性也要加，不加按钮换位不起作用

设置完后，展开按钮变为下图位置。

二、改变展开按钮样式

1.在原本代码的基础上，在<a-table>中添加:expandIcon="expandIcon"，注册一个名为expandIcon的方法。

<a-table
      :columns="columns"
      :data-source="data"
      class="components-table-demo-nested"
      :expandIconColumnIndex="3"
      :expandIconAsCell="false"
      :expandIcon="expandIcon"
></a-table>

2.把原本代码中的data改成下面的样子。

由于我们放置展开图标在第4列，所以要把原本第四列的内容删去，即删去data中所有upgradeNum的值，不然的话第4列就会同时展示upgradeNum值和之后设置的图标。

然后加上代表子表格是否有值的属性，这边用arr为名的数组代替。（为了演示方便，这里的arr不是最终渲染出来的子表格内容，只是用来代表子表格是否有值，之后的子表格数据还是会根据原本代码中innerData的内容渲染。每张子表格展示不同的内容可以看作者其他文章，不在此赘述）

注：arr可以使用true、false，也可以用保存了子表格数据的数组，这边只是为了判定子表格是否有值来给定图标样式。columns表格规则中没有的属性，data中也可以添加，不会影响表格展示。

const data = [
  {
    key: 0,
    name: "Screem",
    platform: "iOS",
    // upgradeNum: 500,
    arr: [1, 2, 3],
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
  {
    key: 1,
    name: "Screem",
    platform: "iOS",
    // upgradeNum: 500,
    arr: [1, 2, 3],
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
  {
    key: 2,
    name: "Screem",
    platform: "iOS",
    // upgradeNum: 500,
    arr: [],
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
];

由于删去了data中原本upgradeNum的值，Upgraded列没有数据了，所以此时的表格变成如下样子。

3.在methods里书写之前注册的expandIcon方法，<UpOutlined />等是引入的Antd中的图标。图标可以自由定义，纯文字或者特殊字符（只要显示的出）都ok。

<script>
import { UpOutlined } from "@ant-design/icons-vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { FrownOutlined } from "@ant-design/icons-vue";
export default {
  methods: {
    // 渲染打开子表格图标样式
    expandIcon(props) {
      //   console.log(props); //返回的是父表格中的所有数据内容
      if (props.record.arr.length > 0) {
        //props.record的内容是表格单行的所有数据，可以在这里判定子表格是否有数据。
        if (props.expanded) {
          //props.expanded的值是true或false，代表子表格是否展开
          //有数据展开时图标样式
          return (
            <a
              onClick={(e) => {
                props.onExpand(props.record, e);
              }}
            >
              详情
              <UpOutlined />
            </a>
          );
        } else {
          //有数据且未展开时图标样式
          return (
            <a
              onClick={(e) => {
                props.onExpand(props.record, e);
              }}
            >
              详情
              <DownOutlined />
            </a>
          );
        }
      } else {
        //无数据时图标样式
        return (
          <span>
            无数据
            <FrownOutlined />
          </span>
        );
      }
    },
  },
};
</script>

好啦，此时不管是有数据未展开、有数据展开、无数据的展开子表格图标都有相应的样式了。

完整代码贴在下面，看懂上面内容的小伙伴们就不用往下看了，没看懂的可以直接复制粘贴自己感受一下。

<template>
  <div class="ceshiview-container">
    <a-table
      :columns="columns"
      :data-source="data"
      class="components-table-demo-nested"
      :expandIconColumnIndex="3"
      :expandIconAsCell="false"
      :expandIcon="expandIcon"
    >
      <template #operation>
        <a>Publish</a>
      </template>
      <template #expandedRowRender>
        <a-table
          :columns="innerColumns"
          :data-source="innerData"
          :pagination="false"
        >
          <template #status>
            <span>
              <a-badge status="success" />
              Finished
            </span>
          </template>
          <template #operation>
            <span class="table-operation">
              <a>Pause</a>
              <a>Stop</a>
              <a-dropdown>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>Action 1</a-menu-item>
                    <a-menu-item>Action 2</a-menu-item>
                  </a-menu>
                </template>
                <a>
                  More
                  <down-outlined />
                </a>
              </a-dropdown>
            </span>
          </template>
        </a-table>
      </template>
    </a-table>
  </div>
</template>

<script>
import { UpOutlined } from "@ant-design/icons-vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { FrownOutlined } from "@ant-design/icons-vue";
const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Platform", dataIndex: "platform", key: "platform" },
  { title: "Version", dataIndex: "version", key: "version" },
  { title: "Upgraded", dataIndex: "upgradeNum", key: "upgradeNum" },
  { title: "Creator", dataIndex: "creator", key: "creator" },
  { title: "Date", dataIndex: "createdAt", key: "createdAt" },
  { title: "Action", key: "operation", slots: { customRender: "operation" } },
];

const data = [
  {
    key: 0,
    name: "Screem",
    platform: "iOS",
    arr: [1, 2, 3],
    // upgradeNum: 500,
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
  {
    key: 1,
    name: "Screem",
    platform: "iOS",
    version: "10.3.4.5654",
    // upgradeNum: 500,
    arr: [1, 2, 3],
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
  {
    key: 2,
    name: "Screem",
    platform: "iOS",
    version: "10.3.4.5654",
    // upgradeNum: 500,
    arr: [],
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
];

const innerColumns = [
  { title: "Date", dataIndex: "date", key: "date" },
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Status", key: "state", slots: { customRender: "status" } },
  { title: "Upgrade Status", dataIndex: "upgradeNum", key: "upgradeNum" },
  {
    title: "Action",
    dataIndex: "operation",
    key: "operation",
    slots: { customRender: "operation" },
  },
];

const innerData = [];
for (let i = 0; i < 3; ++i) {
  innerData.push({
    key: i,
    date: "2014-12-24 23:12:00",
    name: "This is production name",
    upgradeNum: "Upgraded: 56",
  });
}

export default {
  name: "CeshiView",
  components: {
    DownOutlined,
  },
  data() {
    return {
      data,
      columns,
      innerColumns,
      innerData,
    };
  },
  methods: {
    // 渲染打开子表格图标样式
    expandIcon(props) {
      //   console.log(props); //返回的是父表格中的所有数据内容
      if (props.record.arr.length > 0) {
        //props.record的内容是表格单行的所有数据，可以在这里判定子表格是否有数据。
        if (props.expanded) {
          //props.expanded的值是true或false，代表子表格是否展开
          //有数据展开时图标样式
          return (
            <a
              onClick={(e) => {
                props.onExpand(props.record, e);
              }}
            >
              详情
              <UpOutlined />
            </a>
          );
        } else {
          //有数据且未展开时图标样式
          return (
            <a
              onClick={(e) => {
                props.onExpand(props.record, e);
              }}
            >
              详情
              <DownOutlined />
            </a>
          );
        }
      } else {
        //无数据时图标样式
        return (
          <span>
            无数据
            <FrownOutlined />
          </span>
        );
      }
    },
  },
};
</script>

<style></style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^