Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
	<h2>TagBox Style</h2>
	<TagBox v-model="value" style="width:300px;"
			valueField="id"
			textField="text"
			placeholder="Select a Language"
			:limitToList="true"
			:hasDownArrow="true"
			:data="data"
			:tagCss="tagCss"></TagBox>
	<p v-if="value">{{value}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ["3", "4"],
      data: [
        {
          id: "1",
          text: "Java"
        },
        {
          id: "2",
          text: "C#"
        },
        {
          id: "3",
          text: "Ruby"
        },
        {
          id: "4",
          text: "Perl"
        },
        {
          id: "5",
          text: "Basic"
        }
      ]
    };
  },
  methods: {
    tagCss(row) {
      if (row.id == 3) {
        return {
          background: "#ffd7d7",
          color: "#c65353"
        };
      } else if (row.id == 4) {
        return {
          background: "#b8eecf",
          color: "#45872c"
        };
      } else {
        return null;
      }
    }
  }
};
</script>