Коллекция использования Element-UI

внешний фреймворк
Коллекция использования Element-UI

Это первый день моего участия в Gengwen Challenge, смотрите подробности мероприятия:Обновить вызов

Множественный выбор таблицы Vue Element-ui изменяет цвет фона выбранной строки

Давайте сначала посмотрим на визуализацию:

Animation3.gifОбщий образ мыслей:

  • Для получения данных Добавить пользовательское значение
  • Имя класса текущей строки получается в случае щелчка строки (щелчок строки) и ручного выбора флажка (выбрать все), а непосредственное изменение имени класса можно щелкнуть, чтобы просмотреть описание события.
  • В методе обратного вызова в классе рядка (имя рядка) возвращает имя пользователя напрямую

​

Действуйте следующим образом

data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
      ],
    };

2. Щелкните строку и щелкните событие флажка.

methods: { 
   // 手动点击勾选框触发的事件
    handleSelect(selection, row) {
      // selection,row  传递两个参数，row直接是对象
      // 只传一个参数得到的是数组
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },

    // select-all 手动点击全选触发的事件
    handleSelectAll(selection) {
      if (selection.length > 0) {
        selection.forEach((item) => {
          if (item.className === "normal") {
            item.className = "tableSelectedRowBgColor";
          }
        });
      } else {
        // 空数组初始化className
        this.tableData.forEach((item) => {
          if (item.className === "tableSelectedRowBgColor") {
            item.className = "normal";
          }
        });
      }
    },

    //点击行触发，切换复选框状态
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },

}

3, метод обратного вызова className

methods: {
    // 选中背景色
    tableRowClassName({ row }) {
      return row.className;
    },
}

4. Наконец, не забудьте написать имя класса COLOR OH

<style>
.tableSelectedRowBgColor td {
  background-color: #fedcbd !important;
}
</style>

Как добавить всплывающие подсказки к данным таблицы element-ui?

Сценарий: чтобы текст данных в таблице не переносился, содержимое данных будет отображаться при наведении на него мыши, точно так же, как подсказка. Как этого добиться?

Просто добавьте атрибут, чтобы добиться этого, да, это так просто, давайте посмотрим!

Давайте посмотрим на рендеры

14.png

Здесь мы используем атрибут show-overflow-tooltip, официальное объяснение: по умолчанию, если контента слишком много, он будет отображаться в свернутой строке, если вам нужно отображение в одну строку, вы можете использовать show-overflow -tooltip атрибут, который принимает логическое значение, лишнее содержимое при значении true будет отображаться в виде всплывающей подсказки при наведении.

<el-table :data="tableData">
         <el-table-column
                    label="表头内容"
                    align="center"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>Hong Yuan International</span>
                </template>
            </el-table-column>
 </el-table>

Как добавить плавающую подсказку в заголовок таблицы element-ui?

Сцена: Для того, чтобы текст заголовка в таблице не обернут, мышь, отображение содержимого измерителя отображается на месте, подобно такому наконечникам. Как этого добиться? Это случилось, что два элемента предоставляют, давайте посмотрим!

Давайте посмотрим на рендеры

15.png

шаг

1. Прежде всего, мы можем настроить отображение текста с многоточием (в зависимости от потребностей),注意：要设给表格的.cell的div才生效哦！

.el-table th>.cell{
    white-space: nowrap; /* 文本在一行显示，不换行 */
　　text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。*/
　　overflow: hidden; /* 超出部分隐藏 */
}

2. Здесь мы хотим использовать собственный заголовок,Официальное введение веб-сайта нажмите здесь, в последнем введении Scoped Slot.

16.png3. Код

<el-table :data="tableData">
 　　　　　　<el-table-column align="center">
                <template slot="header" slot-scope="scope">
                    // ele的消息提示组件
                    <el-tooltip content="店铺退款总额$" placement="top" effect="light">
                        <span>店铺退款总额$</span>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <span>{{scope.row.数据}}</span>
                </template>
            </el-table-column>
</el-table>

Разобрать

  • Первый шаблон устанавливается с помощью slot="header", который является содержимым заголовка, второй шаблон не устанавливается, это содержимое строки таблицы;

  • Содержание el-tooltip задает содержимое, которое будет отображаться в подвеске.Span - это содержимое заголовка.Подробности см. во введении на официальном сайте;

  • Данные таблицы, объединение данных с помощью шаблона, читайте введение на официальном сайте самостоятельно, и я не буду здесь его описывать;

到此就设置完成了，就实现悬浮表头显示内容啦！

Категории