iview render函数使用场景

一、table中序号、表格渲染

//身份证号表头
      sfzhtabHead: [
        {
          // type: 'index',
          width: 60,
          align: "left",
          title: "序号",
          fixed: "left",
          render: (h, params) => {
            return h("span", params.index + 1);
          },
        },
        {
          title: "姓名",
          key: "xm",
          minWidth: 130,
          fixed: "left",
          tooltip: true,
          render: (h, params) => {
            return h("Input", {
              class: { tabTableInput: true },
              props: {
                value: "",
                placeholder: "请输入",
              },
              on: {
                input: (val) => {
                  this.sfzhList[params.index].xm = val;
                },
              },
            });
          },
        },
        {
          title: "身份证号",
          key: "bsh",
          minWidth: 130,
          fixed: "left",
          tooltip: true,
          render: (h, params) => {
            return h("Input", {
              class: { tabTableInput: true },
              props: {
                value: "",
                placeholder: "请输入",
              },
              on: {
                input: (val) => {
                  this.sfzhList[params.index].bsh = val;
                },
              },
            });
          },
        },
        {
          title: "操作",
          key: "play",
          width: 180,
          tooltip: true,
          fixed: "right",
          slot: "action",
          className: "table-btns",
        },
      ],

.tabPadding >>> .tabTableInput {
  width: 232px;
}

render渲染的input，通过props绑定属性，可以用类名来修改样式（需要先找到父元素，然后穿透修改样式）通过on对象监听事件。

二、tabs切换的样式自定义

 <TabPane :label="sfzhLabel" name="name1" class="tabPadding">

sfzhLabel: (h) => {
        return h("div", [
          h("span", "身份证号信息"),
          h(
            "span",
            {
              class: { tabStyle: true },
            },
            "3"
          ),
        ]);
      },

.ykdxxxTR >>> .ivu-tabs-tab .tabStyle {
  display: inline-block;
  margin-left: 5px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  color: #fff;
  background-color: #20b764;
}

需要注意的就是通过class绑定样式，仍然要找到父级元素 穿透绑定。